Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: div height=100%
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
siutek
witam, jakiś czas temu przestawilem sie z <table> na <div> budując layout strony, i nawet mi się to spodobało, jednak ostatnio trafilem na problem.
chcąc żyć w zgodzie z W3C, i jednocześnie mieć pewność że moja witryna poprawnie wyświetla się na wszystkich przeglądarkach zacząłem używać na główka <DOCTYPE> w wersji STRICT zamiast wczesniejszego TRANSITIONAL.

używając TRANSITIONAL moja strona wyświetlała się poprawnie w najnowszych FF, Safari, Chrome i Operze, ale chrzanila sie przy IE 10, poprzestaiweniu, IE zaczelo wyswietlac poprawnie, a pozostale przeglądarki się sypnęły.

problemem jest wysykość <div>
poglądowy kod:

  1. <div class="d1">aaa</div>
  2. </body>


w cssie klasa d1 ma wartości następujące:

.d1 {
width:100%;
height:100%;
}

no i div rozciąga mi się na całą szerokość ekranu, niestety wysokość jest taka, jak wysokość elementu zawartego w jego wnętrzu. czyli w tym wypadku domyślna wysokość tekstu "aaa". Za chiny ludowe div nie chce mi się rozciągnąć na całą wysokość okna przeglądarki...

co jest nie tak? jak przy doctype strict zmusić div do rozciągnięcia się na całą stronę, od brzegu do brzegu?
zbychoCom
ja to robię za pomocą jQuery:

$('div.d1').css('height', $(window).height());
ixox
Musisz ustawić wysokość rodzica. Body,html np na 100%
!*!
bez display table się nie obejdzie. http://jsfiddle.net/HEjYd/
siutek
no i bingo!
faktycznie html, body {height:100%} i display:table; pomoglo,

dzięki!!
Damonsson
Bez display: table też można:
http://jsfiddle.net/HEjYd/3/
!*!
Cytat(Damonsson @ 27.09.2012, 11:06:42 ) *
Bez display: table też można:
http://jsfiddle.net/HEjYd/3/


Tak, ale wtedy pojawia się scroll i 1px umyka w wypadku obramowania.
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.