CSS - jak zrobić 100% wysokość DIV? - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS - jak zrobić 100% wysokość DIV?

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 3

1. Data: 2010-05-18 14:45:13
Temat: CSS - jak zrobić 100% wysokość DIV?
Od: Marek <b...@e...com>

Witam,

Jest sobie kod HTML:

<html>
<head>
...
</head>
<body>
<div class="screen"></div>
tu jakakolwiek treść - czasem wyższa niż zawartość okna, a czasem
odwrotnie.
</body>
</html>

Do tego style:

html {
margin: 0px;
padding: 0px;
position: relative;
}

body {
margin: 0px;
padding: 0px;
position: relative;
}

.screen {
background-image: url(shader_s1.png);
background-repeat: repeat;
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
}

Powstaje problem: gdy okno przeglądarki jest wyższe niż dokument, to
półprzejrzysty screen kończy się powyżej dolnej krawędzi okna bo do tego
miejsca sięga BODY. Jak zmusić BODY aby wynosił przynajmniej 100% wysokości
okna?

W dodatku aby ta zmiana nie zaszkodziła w sytuacji odwrotnej: gdy dokument
jest wyższy niż okno przeglądarki, screen ma sięgać końca dokumentu - nie
okna. W przeciwnym razie scrollowanie ujawni nieprzesłonięty fragment
strony. Czy da się to zrobić bez użycia JS?

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2010-05-18 21:52:20
Temat: Re: CSS - jak zrobić 100% wysokość DIV?
Od: Tomasz Sowa <t...@t...NOSPAM.org>

Dnia Tue, 18 May 2010 16:45:13 +0200, Marek napisał(a):

> Do tego style:
>
> html {
> margin: 0px;
> padding: 0px;
> position: relative;
> }
>
> body {
> margin: 0px;
> padding: 0px;
> position: relative;
> }

html {
margin: 0px;
padding: 0px;
min-height: 100%;
position: relative;
}

body {
margin: 0px;
padding: 0px;
min-height: 100%;
}

--
Tomek
http://ttcalc.sourceforge.net/

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2010-05-19 07:51:10
Temat: Re: CSS - jak zrobić 100% wysokość DIV?
Od: Marek <b...@e...com>

Dzięki powtórnie. Pomogło :-)
Rozwiązanie pozornie oczywiste jednakże nie w kontekscie naszego
poprzedniego wątku. Nie chciałem dodawać min-height w obecności
position:relative, którego wymaganej obecności w CSS w stosunku do elementu
HTML nie rozumiem lecz spełnia swoją funkcję, o której rozmawialiśmy.
Wspominałeś wtedy o tym aby pozbyć się height:100%. Uznałem więc, że to
pewnie kolejna sztuczka, której nie należy rozumieć i w konsekwencji
stosować albo position:relatve albo regulowanie wysokości (bo np. jedno z
drugim się gryzie).

[ pokaż wiadomość z nagłówkami ]

do góry