Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: div centrowanie w pionie i scroll
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Jaremilus
9.05.2013, 13:01:01
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
AdIoS_Neo
12.05.2013, 20:24:57
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.