CSS: min-height DIVu określony w procentach nie działa

eGospodarka.pl › Grupy › pl.comp.www › CSS: min-height DIVu określony w procentach nie działa

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 3

1. Data: 2009-07-12 00:59:11
Temat: CSS: min-height DIVu określony w procentach nie działa
Od: "Marcin Połeć" <u...@N...gazeta.pl>

Prosta sprawa, strona wygląda tak:

<head>...</head>
<body>
<div class="MainDiv">
<div class="Header">Header</div>
<div class="LeftSideColumn">menu</div>
<div class="Content">content</div>
</div>
<div class="Footer">Footer</div>
</body>

MainDiv ma minimum 100% wysokości ekranu i margines na stopke. Teraz chcę
żeby LeftSideColumn i Content miały ustawiną minimalną wysokość w taki
sposób żeby wypełniały całą przestrzeń między nagłówkiem a stopką, nawet gdy
nie ma w nich żadnej treści.

Mój css wygląda tak:
html, body {min-height: 100%; height: 100%;}

MainDiv {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
margin: 0 auto -28px;
}

Header {height: 54px;}

Footer {height: 28px;}

LeftSideColumn
{
float: left;
clear: left;
min-height: 100%;
height: auto !important;
height: 100%;
width: 15%;
}

Content
{
float: right;
clear: right;
min-height: 100%;
height: auto !important;
height: 100%;
width: 84.6%;
}

MainDiv ma taką wysokość jaką chcę, czyli 100% viewportu, ale dwa
zawierające się w nim divy (LeftColumn i Content) po ustawieniu min-height
na 100% nie mają 100% wysokości MainDiv tylko 0.

Chcę mieć taki układ strony:

--------------
* Header *
--------------
* * *
* L * *
* E * CONTENT*
* F * *
* T * *
* * *
--------------
* FOOTER *
--------------

Gdy min-height określam w px to wszystko jest ok, ale nie mogę tego zrobić
bo nie wiem jaką rozdzielczość ma ustawioną użytkownik. Gdy określam w % to
cały czas wysokość wynosi 0.

Chcę żeby left i content wypełniały cały obszar między header a footer,
nawet gdy nie ma w nich żadnej treści. Co zmienić?

--
Wysłano z serwisu Usenet w portalu Gazeta.pl -> http://www.gazeta.pl/usenet/

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

do góry
2. Data: 2009-07-12 14:34:36
Temat: Re: CSS: min-height DIVu określony w procentach nie działa
Od: Paweł Piskorz <n...@p...nie?>

Marcin Połeć pisze:
> MainDiv {
> min-height: 100%;
> }
>
> LeftSideColumn
> {
> min-height: 100%;
> }
>
> Content
> {
> min-height: 100%;
> }

http://kurs.browsehappy.pl/CSS/Wymiary#height

> Chcę żeby left i content wypełniały cały obszar między header a footer,
> nawet gdy nie ma w nich żadnej treści. Co zmienić?

http://www.alistapart.com/articles/fauxcolumns/

--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

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

do góry
3. Data: 2009-07-14 23:05:58
Temat: Re: CSS: min-height DIVu określony w procentach nie działa
Od: "Marcin Połeć" <u...@g...pl>

Paweł Piskorz <n...@p...nie?> napisał(a):

> Marcin Połeć pisze:
> > MainDiv {
> > min-height: 100%;
> > }
> >
> > LeftSideColumn
> > {
> > min-height: 100%;
> > }
> >
> > Content
> > {
> > min-height: 100%;
> > }
>
> http://kurs.browsehappy.pl/CSS/Wymiary#height
>
> > Chcę żeby left i content wypełniały cały obszar między header a footer,
> > nawet gdy nie ma w nich żadnej treści. Co zmienić?
>
> http://www.alistapart.com/articles/fauxcolumns/
>
>
OK dzieki, problem rozwiązałem javascriptem którym odczytuję wysokość ekranu
użytkownika a potem odejmuję od tego wysokość nagłówka i stopki i to co
zostanie przypisuję jako wysokość mojemu divowi o ile nie jest większy
(chodzi mi tylko o minimalną wysokość).

--
Wysłano z serwisu Usenet w portalu Gazeta.pl -> http://www.gazeta.pl/usenet/

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

do góry