Forum PHP.pl > [JavaScript][CSS]Wysokość div na 100%

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][CSS]Wysokość div na 100%

!*!

1.08.2010, 11:27:13

Temat poruszany niejednokrotnie, jednak nigdzie nie ma prostej odpowiedzi. Jak zmusić div aby miał 100% wysokości, względem innego diva lub body? Chciałbym uzyskać identyczny efekt jak w kalendarzu google, gdzie np. po zmianie rozmiaru okna przeglądarki, div który jest rozciągnięty również zmienia się jego wysokość, ale nadal jest rozciągnięty na całą wysokość strony.

ps. Nie interesują mnie żadne biblioteki np. jQuery. Rozwiązanie może być tylko w czystym JS lub CSS

Fifi209

1.08.2010, 11:30:24

[CSS] pobierz, plaintext 
 
height: 100%;
 
[CSS] pobierz, plaintext

!*!

1.08.2010, 11:31:14

To nie rozciągnie diva.

krzysztof_kf

1.08.2010, 11:33:59

Daj tak jak fifi napisał + overflow: hidden;

Jeśli nie zadziała to nie mamy szklanej kuli co tam zakodowałeś .

顯示您的代碼

Fifi209

1.08.2010, 11:34:37

Cytat(!*! @ 1.08.2010, 11:31:14 )

To nie rozciągnie diva.

U mnie działa...

[HTML] pobierz, plaintext 
<html>
	<body>
		<div style="height: 150px; width: 200px; border: 1px solid black;">
			<div style="height: 100%; border: 1px solid red;">Test</div>
		</div>
	</body>
</html>
[HTML] pobierz, plaintext

Chyba, że źle Cię zrozumiałem.

Kshyhoo

1.08.2010, 11:38:40

Albo pokombinuj tak:

[CSS] pobierz, plaintext 
#twoj_div {
	margin: 0 0 -20000px 5px;
	padding-bottom: 20000px;
	height: 100%;
}
[CSS] pobierz, plaintext

!*!

1.08.2010, 12:21:27

[HTML] pobierz, plaintext 
<html style="margin:0;padding:0;height: 100%;overflow: hidden">
 <body style="margin:0;padding:0;height: 100%;">
  <div style="height: 100%; border: 1px solid red;">
   <div style="float:left;height 100%;border: 1px solid green;">dwa</div>
  </div>
 
 </body>
</html>
[HTML] pobierz, plaintext

1. Każda przeglądarka interpretuje 100% inaczej (czasami jest dobrze 99.9%), w operze jest to za dużo i stronę można przewinąć ruszając scrollem myszki, chrome jak tako sobie z tym radzi.
2. I dlaczego div z float nie może być rozciągnięty.

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.