Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] div height: 100% + wyśrodkowanie zawartości
Forum PHP.pl > Forum > Przedszkole
lukasz_matysek
19.05.2010, 19:10:53
Poniżej przedstawiam css+html projektu nad którym pracuję. W celu uzyskania efektu stopki, która jest zawsze na dole nawet gdy strona jest pusta, zastosowałem patent znany ze strony http://ryanfait.com/sticky-footer/

Sprawdza się on doskonale. Chciałbym jednak uzyskać pewną rzecz: div "content" przechowuje zawartość strony, jednak nie udaje mi się żadnym sposobem rozciągnąć jego wysokości na minimum 100% strony. Dodatkowo, chciałbym aby w obrębie tego konkretnego diva zawartość była środkowana również w pionie. Czy da się osiągnąć te dwie rzeczy?

CSS: 

[HTML] pobierz, plaintext 
  1. *
  2. {
  3. margin: 0;
  4. font-family: verdana;
  5. }
  6.  
  7. html, body
  8. {
  9. height: 100%;
  10. }
  11.  
  12. .wrapper 
  13. {
  14. min-height: 100%;
  15. height: auto !important;
  16. height: 100%;
  17. margin: 0 auto -20px;
  18. }
  19.  
  20. .footer, .push
  21. {
  22. height: 20px;
  23. }
[HTML] pobierz, plaintext


Struktura strony:
[HTML] pobierz, plaintext 
  1. <body>
  2.        <div class="wrapper">
  3.              <div class="content"></div>
  4.              <div class="push"></div>
  5.         </div>
  6.  
  7.         <div class="footer">
  8.         </div>
  9.  
  10. </body>
[HTML] pobierz, plaintext
krzysztof_kf
19.05.2010, 20:01:32
a dla content nie widać zawartości żadnej .
lukasz_matysek
19.05.2010, 20:24:52
owszem, bo jej po prostu nie wstawiłem. Chciałem tylko przedstawić schemat. Zresztą - przy założeniach które postawiłem, nawet dla zerowej zawartości content chciałbym, żeby pojawiał się on na 100% dostępnej przestrzeni, czyli między górą a stopką.
Olimpia_ona
20.02.2011, 13:20:49
Odświeżam temat.
Mam ten sam problem. W celu uzyskania stopki zastosowałam ten sam kod co kolega lukasz, jednak również w tym szablonie chciałabym spowodować by <div class="content"> rozciągał się w pionie na 100% okna.
Czy ktoś wie jak to zrobić?
erix
20.02.2011, 14:52:54
position: absolute i wszystkie koordynaty ustaw na zero. Dla elementów html i body ustaw wysokość na 100%. Albo wystarczy sam height dla warstwy, bez pozycjonowania. wink.gif
Olimpia_ona
20.02.2011, 17:49:15
Cytat(erix @ 20.02.2011, 14:52:54 ) *
position: absolute i wszystkie koordynaty ustaw na zero. Dla elementów html i body ustaw wysokość na 100%. Albo wystarczy sam height dla warstwy, bez pozycjonowania. wink.gif


position absolute nie bardzo mnie urządza.
Spróbuje wyjaśnić: do uzyskania poniższego szablonu

użyłam patentu sticky footer
jednak w ten sposób elementów zawartych w div=content nie mogę rozciągać do 100%, w ogóle tego div=content nie widać mimo nadania mu czerwonego tła.

Po zastosowaniu position:absolute na div=content robi się tak:

tj. div=content się przesuwa w lewo, a chciałabym, by pozostał na środku i reagował na to gdzie jest <div class="footer">.

Chciałabym uzyskać efekt, by 
[HTML] pobierz, plaintext 
  1. <div id="tresc">
  2.                 <b>To powinno się rozciągać</b>
  3. </div>
[HTML] pobierz, plaintext


się rozciągał do dołu strony. Czy ktoś może pomóc?

Wklejam kod:
HTML
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xml:lang="pl-PL" lang="pl-PL" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
  5.     <link rel="stylesheet" type="text/css" href="test.css" />
  6.     <title>NGO</title>
  7. </head>
  8. <body>
  9.      <div class="MY_cialo">
  10.        <div id="content">
  11.         <div id="MY_LEWYBOK"></div>
  12.         <div id="MY_PRAWYBOK"></div>
  13.         <div id="MY_LOGO">MY_LOGO</div>
  14.         <div id="MY_CP6"MY_CP6</div>
  15.         <div id="MY_SEARCH">MY_SEARCH</div>
  16.         <div id="MY_CP8">MY_CP8</div>
  17.         <div id="MY_CP3">MY_CP3</div>
  18.         <div id="MY_LP">
  19.  
  20.             <div id="my_menu">
  21.                 1<br />2<br />3<br />4<br />5<br />
  22.                 1<br />2<br />3<br />4<br />5<br />
  23.                 1<br />2<br />3<br />4<br />5<br />
  24.                 1<br />2<br />3<br />4<br />5<br />
  25.             </div>
  26.  
  27.             MY_LP
  28.         </div>
  29.         <div id="MY_interiorpageCP">
  30.             <div id="MY_breadcrumb">
  31.                 MY_breadcrumb
  32.             </div>
  33.  
  34.             <!-- tytul strony -->
  35.             <div id="MY_ActivTitle">Tytuł strony</div>
  36.             <!-- koniec tytul strony -->
  37.  
  38.             <div id="tresc">
  39.                 <b>To powinno się rozciągać</b>
  40.             </div>
  41.  
  42.             <!-- stopka -->
  43.             <div id="MY_stopkapodstr"><b>Stopka podstrony - powinna być na dole</b></div>
  44.             <!-- koniec stopka -->
  45.         </div>
  46.  
  47.        </div>
  48.        <div class="push"></div>
  49.      </div>
  50.      <div class="footer">
  51.              <div id="MY_CP4">MY_CP4</div>
  52.              <div id="MY_CP7">MY_CP7</div>
  53.      </div>
  54. </body>
  55. </html>
[HTML] pobierz, plaintext


i test.css
[HTML] pobierz, plaintext 
  1. * {
  2.     margin: 0;
  3. }
  4. html, body {
  5.     height: 100%;
  6.     font-family: tahoma, verdana, arial;
  7.     background-image: url(images/tlogora.jpg);
  8.     background-repeat: repeat-x;
  9.     color:#5C5C5C;
  10.     font-size:11px;
  11. }
  12.  
  13. #Form {text-align:center;}
  14.  
  15. .MY_cialo {
  16.     min-height: 100%;
  17.     height: auto !important;
  18.     height: 100%;
  19.     margin: 0 auto -105px;
  20.  
  21.     background-image: url("images/tlodol.jpg");
  22.     background-position: center bottom;
  23.     background-repeat: repeat-x;
  24. }
  25.  
  26. #content { background-color:Red; width:1000px; margin:auto; text-align:left;}
  27.  
  28. #MY_LEWYBOK  { width: 20px; min-height: 370px; height:370px; float: left; background-color:Black; }
  29. #MY_PRAWYBOK { width: 20px; min-height: 370px; float: right; background-color:Blue;}
  30. #MY_LOGO     { background-color:Fuchsia; width: 565px; height: 125px; float: left; overflow:hidden;}
  31.  
  32. #MY_CP6      { background-color:Fuchsia; width: 395px; height: 55px; float: left;}
  33. #MY_SEARCH   { background-color:Gray; width: 395px; height: 70px; float: left;}
  34. #MY_CP8      { background-color:Green; width: 960px; height: 44px; float: left; }
  35. #MY_CP3      { background-color:Lime; width: 960px; height: 191px; float: left; margin-bottom:3px; }
  36. #MY_LP       { background-color:#ffffff; width: 245px; float: left; margin-right:8px; }
  37. #MY_CP       { background-color:Navy; width: 450px; float: left; margin-right:12px;}
  38. #MY_CP2      { background-color:Olive; width: 245px; float: left;}
  39.  
  40. .footer, .push {
  41.  clear:both;
  42.  height: 105px;
  43.  width: 960px;
  44.  margin:auto;
  45.  text-align:left;
  46. }
  47.  
  48. #MY_CP4      { background-image:url(images/tlocp4.jpg); background-repeat:no-repeat;  width: 960px; height:55px; float: left; margin-top:20px; }
  49. #MY_CP7      { width: 960px; height:30px; float: left; padding: 0px 10px 0px 10px;}
  50.  
  51.  
  52. #my_menu { background-image:url(images/tlomenu.jpg); background-repeat:repeat-y; width:245px; padding-top: 8px;}
  53.  
  54. #MY_interiorpageCP { background-color:#ffffff; width: 700px; float: left; margin-right:7px; }
  55.  
  56. #MY_breadcrumb { widht:100%; margin-top:19px; margin-bottom:15px; height:28px; background-color:#EEEEEE; 
  57.                  background-image:url(images/bgbreadcrumb_right.gif); background-position:right center; background-repeat:no-repeat; }
  58.  
  59. #MY_ActivTitle  { width:100%; height:22px; position: relative;}
  60. #MY_stopkapodstr { width:100%; height:38px; background-color:#F0F0F0; position:relative;}
  61. #tresc { background-color:Orange; }
[HTML] pobierz, plaintext

everth
20.02.2011, 18:00:42
Mała prośba - weź wrzuć to gdzieś online bo ludzie są leniwi i nie będą kodu kopiować. Wtedy się zobaczy.
Olimpia_ona
20.02.2011, 18:22:49
sad.gif nie mam gdzie tego wrzucić online, stąd te kombinacje ze zdjęciami
erix
21.02.2011, 11:33:35
Wrzuć na FTP i podaj linka, Twój temat na forum nie jest jedyny.

A jedyne, co mi przychodzi do głowy na podstawie zdjęć, to display: table-cell.
Olimpia_ona
27.02.2011, 19:07:39
ok, umieściłam on-line Odwiedź stronę

To co chciałabym uzyskać to rozciąganie tego pomarańczowego fragmentu strony (<div id="tresc">) do dołu tj. do <div class="footer">.
Dodatkowo jak by ktoś wiedział co zrobić z tym <div id="MY_ActivTitleC"></div>, który od góry nachodzi na <div id="tresc"> to też poproszę o informację, bo wolałabym by tak nie nachodził, tylko odpychał <div id="tresc"> do dołu te parę pikseli.

display: table-cell mnie nie urządza, bo pod IE też chciałabym mieć pożądany efekt.

Dziękuje
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.