Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> div height=100%
siutek
post 27.09.2012, 09:18:52
Post #1





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

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


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?
Go to the top of the page
+Quote Post
zbychoCom
post 27.09.2012, 09:23:31
Post #2





Grupa: Zarejestrowani
Postów: 55
Pomógł: 9
Dołączył: 7.04.2011

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


ja to robię za pomocą jQuery:

$('div.d1').css('height', $(window).height());
Go to the top of the page
+Quote Post
ixox
post 27.09.2012, 09:23:36
Post #3





Grupa: Zarejestrowani
Postów: 51
Pomógł: 13
Dołączył: 8.09.2012

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


Musisz ustawić wysokość rodzica. Body,html np na 100%
Go to the top of the page
+Quote Post
!*!
post 27.09.2012, 09:31:57
Post #4





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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


bez display table się nie obejdzie. http://jsfiddle.net/HEjYd/


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
siutek
post 27.09.2012, 09:44:43
Post #5





Grupa: Zarejestrowani
Postów: 173
Pomógł: 1
Dołączył: 26.10.2005
Skąd: Toruń

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


no i bingo!
faktycznie html, body {height:100%} i display:table; pomoglo,

dzięki!!
Go to the top of the page
+Quote Post
Damonsson
post 27.09.2012, 10:06:42
Post #6





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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


Bez display: table też można:
http://jsfiddle.net/HEjYd/3/
Go to the top of the page
+Quote Post
!*!
post 27.09.2012, 12:24:52
Post #7





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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


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.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 10.06.2024 - 12:59