Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> div centrowanie w pionie i scroll
Jaremilus
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 9.05.2013

Ostrzeżenie: (0%)
-----

Witam, mam do rozwiazania maly problemik z divami, mianowicie:

Div pomaranczowy powinien miec zawsze 16px odstepu od naglowka i stopki oraz wypelniac 100% wysokosci obszaru pomiedzy nimi, niezaleznie od tego czy zmniejsze okno przegladarki czy dam pelny ekran.

Div zielony powinien byc zawsze wycentrowany w pionie wzgledem Diva pomaranczowego, a tresc skrolowana jesli wykroczy poza obszar pomaranczowy.

Niestety tak sie nie dzieje, dlatego jestem ciekawy czy istnieje jakies rozwiazanie tego problemu na bazie css? Ewentualnie gdzie popelniam blad. Dzięki za pomoc!

[HTML] pobierz, plaintext 
  1. <head>
  2. 	<style media="all" type="text/css">
  3.  
  4. #strona {
  5.   position: relative;
  6.   background-color:#000;
  7.   width: 960px;
  8.   margin: 0px auto;
  9.   height: 100%;
  10. }
  11.  
  12. #sekcja1 {
  13. 	position: fixed;
  14.   width: 960px;
  15.   margin: 0px auto;
  16.   top: 16px;
  17.   height: 122px;
  18. 	}
  19.  
  20. #sekcja2 {
  21. 	  position: fixed;
  22. 	  background-color:#C96;
  23.   top: 154px;
  24.   bottom: 36px;
  25.   width: 960px;
  26.   min-height: 590px;
  27.   max-height: 725px;
  28. 	}
  29.  
  30. #tabela {
  31. 	  display: table;
  32.   height: 100%;
  33.   margin: auto;
  34. 	}
  35.  
  36. #komorka {
  37. 	  display: table-cell;
  38.   vertical-align: middle;
  39. 	}
  40.  
  41. #tresc {
  42. background-color: #0F6;
  43.   width: 960px;
  44.   height: 490px;
  45. 	}
  46.  
  47. #sekcja3 {
  48. position: fixed;
  49.   bottom: 0px;
  50.   width: 960px;
  51. 	}
  52.  
  53. #naglowek {
  54. 	text-align:center;
  55. 	background-color:#CCC;
  56. 	height:100%;
  57. }
  58.  
  59. #stopka {
  60. text-align:center;
  61. 	background-color:#CCC;
  62.   height: 20px;
  63. }
  64.  
  65. 	</style>
  66. </head>
  67. <body>
  68.  
  69. <div id="strona">
  70. <div id="sekcja1">
  71. <div id="naglowek">header</div>
  72. </div>
  73. <div id="sekcja2">
  74. <div id="tabela">
  75. <div id="komorka">
  76. <div id="tresc">zawartosc</div>
  77. </div>
  78. </div>
  79. </div>
  80. <div id="sekcja3">
  81. <div id="stopka">stopka</div>
  82. </div>
  83. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 1)
AdIoS_Neo
post
Post #2





Grupa: Zarejestrowani
Postów: 159
Pomógł: 43
Dołączył: 8.03.2009

Ostrzeżenie: (0%)
-----

Witam,
o takie coś Ci chodziło ?
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. 	<title></title>
  5. 	<meta charset="utf-8" />
  6. 	<style media="all" type="text/css">
  7. 		*{
  8. 			margin: 0px;
  9. 			padding: 0px;
  10. 		}
  11. 		html, body{
  12. 			height: 100%;
  13. 		}
  14.  
  15. 		#strona {
  16. 			position: relative;
  17. 			width: 960px;
  18. 			margin: 0 auto;
  19. 			height: 100%;
  20. 			/* fix margin collapse */
  21. 			border-top: 1px solid transparent;
  22. 			margin-top: -1px;
  23. 		}
  24. 		#sekcja1 {
  25. 			height: 122px;
  26. 			margin: 16px 0 0;
  27. 		}
  28. 		#naglowek {
  29. 			text-align:center;
  30. 			background-color:#CCC;
  31. 			height:100%;
  32. 		}
  33. 		#sekcja2 {
  34. 			background-color:#C96;
  35. 			min-height: 590px;
  36. 			height: calc(100% - 154px - 36px);
  37. 			height: -webkit-calc(100% - 154px - 36px);
  38. 			margin: 16px 0;
  39. 		}
  40. 		#tabela {
  41. 			display: table;
  42. 			width: 100%;
  43. 			height: 100%;
  44. 			margin: auto;
  45. 		}
  46. 		#komorka {
  47. 			display: table-cell;
  48. 			vertical-align: middle;
  49. 		}
  50. 		#tresc {
  51. 			background-color: #0F6;
  52. 			width: 960px;
  53. 			height: 490px;
  54. 		}
  55. 		#sekcja3 {
  56. 			height: 20px;
  57. 		}
  58. 		#stopka {
  59. 			text-align:center;
  60. 			background-color:#CCC;
  61. 		}
  62. 	</style>
  63. </head>
  64. <body>
  65. 	<div id="strona">
  66. 		<div id="sekcja1">
  67. 			<div id="naglowek">header</div>
  68. 		</div>
  69. 		<div id="sekcja2">
  70. 			<div id="tabela">
  71. 				<div id="komorka">
  72. 					<div id="tresc">zawartosc</div>
  73. 				</div>
  74. 			</div>
  75. 		</div>
  76. 		<div id="sekcja3">
  77. 			<div id="stopka">stopka</div>
  78. 		</div>
  79. 	</div>
  80. </body>
  81. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.12.2025 - 23:29
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn