Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Element na całą wysokość pozostałego obszaru
Forum PHP.pl > Forum > Przedszkole
Lirdoner
Witam, mam taki problem:
W dokumencie HTML mam <header> i powiedzmy zajmuje on 200px wysokości. Na samym dole mam <footer> który jest zawsze na samym dole (position: absolute; bottom: 0) i zajmuje 100px wysokości. Pomiędzy nimi mam jakiś div i chciałbym teraz zrobić tak aby zajmował całą wysokość pozostałego obszaru. Jak takie coś uczynić?
IProSoft
A co definujesz przez pozostały obszar ?

Div będzie miał taką wysokość jak treśc, którą w nim umieścisz.
Lirdoner
Chodzi mi o to, że załóżmy na jakiejś tam rozdzielczości obszar jaki widzi użytkownik strony to 1000px. Header zajmuje 200, footer zajmuje 100 więc pozostały obszar to 700px i bym temu elementovi div dał height: 700px ale no to jest tylko dla jednej rozdzielczości, jak zrobić aby automatycznie to się dopasowywało?
IProSoft
Możesz to zrobić na dwa sposoby, przez JS ( nie sprawdzałem ):
[JAVASCRIPT] pobierz, plaintext
  1. $('#div').height( $(window).height() - 200 );
[JAVASCRIPT] pobierz, plaintext

lub przez CSS:
http://stackoverflow.com/questions/1575141...-browser-window

@Damonsson szybszy :-)
Contritio
Najprościej wydaje mi się, że jest ustawić kolejno sekcje w HTML, ktore beda wczytywane z CSS typu

HTML :

<div id="header">
Tu bedzie jakis tekst
</div>

<div id="center">
Tu bedzie jakis tekst
</div>

<div id="footer">
Tu bedzie jakis tekst
</div>

CSS :

#header {
width:999px;
height:200px
}

#center {
width:999px;
min-height:500px
}

#footer {
width:999px;
height:100px
}

Resztę pierdółek elementów do selektorów przypisujemy wg. naszego uznania. Chyba dobrze zrozumiałem w czym problem.
Zaś min-height zawsze będzie nam zwiększało dany div w raz z treściąsmile.gif

E: dobra źle to zrozumiałem tongue.gif
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.