Witam!
Chcę mieć układ taki:
Jak zrobić taki układ bez javascriptu?
Bo pojawia się problem mieszania px z %. Gdybym chciał zmienną wysokość headera to powiedzmy mógłbym mu dać 10%, content 80%, footer 10%.
<style type="text/css">
div {
width: 200;
height: auto;
border:1px solid #ff9900;
position: absolute;
top:10px;
bottom: 20px;
}
</style>
Ustawiasz odpowiedni top, bottom i height jako auto. http://www.quackit.com/css/properties/css_bottom.cfm - tu możesz potestować w polu "Try it yourself!". Jak takiego diva zamkniesz w divie pokrywającym całą powierzchnię strony bez scrolla, to powinieneś uzyskać zamierzony efekt ;)
Jednak coś nie do końca to rozwiązuje mój problem. Otóż mam głównego diva tóż po body. Na nim ustawiłem bottom: 40px; height: auto; position: absolute;
Wewnątrz mam content z height: auto; i cały main się dopasowuje do niego, mimo, że chcę, aby minimum zostawało 40px od dołu.
Najprościej rzecz ujmując chodzi mi, żeby nigdy mój div główny - "main" nie był niższy niż wysokość okna - 40px (ani wyższy o ile content tego nie wymaga), a w środku żeby menu i content miał taką samą wysokość.
Tutaj szkic: http://img208.imageshack.us/i/szkico.png/
proste: http://jsbin.com/ucetiz/edit#javascript,html,live
zamiast tabel mozesz sobie porobic ladne htmlowe, sematyczne itd elementy - tylko musisz sie pobawic z display i wartosciami table-*
edit: content sobie uzupelnij sam, to juz zadna sztuka
edit2: jakby sie cos sypalo - sprawdz table-layout
@dzek69 wreszcie miałem czas się z tym pobawić i faktycznie działa, tyle że... mam taki układ jak na tym linku co podesłałeś (zrobiłem za pomocą cssa) i jest problem bo wewnątrz content mam menu i taki content wewnetrzny jednak ani jedno ani drugie nie chce się rozciągnąć na wysokość komórki, mimo że jest ustawiony height: 100%, nie ma żadnych paddingów, marginów itd. Podglądałem firebugiem i po prostu oblicza jakoś dziwnie wysokość. Dodam, że na chromie działa wszystko OK, natomiast IE i FF źle wyświetla. Z tego co widzę to taki efekt uzyskuje na chromie jak wyłączę height: 100%.
EDIT: z tego co wyczytałem to nie można ustawić wewnątrz komórki height: 100% dla div. No to lipa, problem dalej nie rozwiązany. Czyli zostaje chyba tylko JS.
Na JS Bin to działa, ale spróbuj zapisać jako *.html i odpalić w ff czy chromie wtedy już nie działa.
http://jsbin.com/ucetiz/2/edit#javascript,html,live
Ramka ma wycięty doctype i bez tego na ff działa ok,
Tak czy tak, robimy z doctype i zgodnie ze standardami, które mówią, że aby elementowi ustawiać procentową wysokość musimy określić wysokość jego rodzica. Tak więc małe zmiany w css:
body, html { width: 100%; height: 100%; }
.row_max { height: 100%; }
oraz html
<div class="row row_max">
<div id="content">
<div id="menu">asdasd</div>
<div id="inner_content">sadads</div>
</div>
</div>
Jeżeli nic poza rzeczami opisanymi w kodzie się nie zmieniło - to brakuje Ci height: 100%; dla #content.
Możesz zapodać aktualny kod, żebym to "widział", bo coś się mogło pozmieniać i nie mam jak w to zajrzeć.
Próbowałem już height: 100% dla contentu, ale to psuje to po co cała ta zabawa jest - daje 100% (czyli wysokość całej strony), a chcę żeby footer był na dole w oknie.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body, html { width: 100%; height: 100%; }
.row_max { height: 100%; }
#main { display: table; width: 100%; height: 100%; }
.row { display: table-row; }
#header {
display: table-cell;
background-color: red;
width: 100%;
height: 50px;
}
#content {
display: table-cell;
background-color: black;
bottom: 50px;
}
#inner_content {
height: 100%;
background-color: yellow;
right: 0;
}
#menu {
background-color: gray;
float: left;
height: 100%;
width: 120px;
}
#footer {
display: table-cell;
background-color: green;
height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="row">
<div id="header">aaa</div>
</div>
<div class="row row_max">
<div id="content">
<div id="menu">asdasd</div>
<div id="inner_content">sadads</div>
</div>
</div>
<div class="row">
<div id="footer">sadasdsa</div>
</div>
</div>
</body>
</html>
Fakt, zachowuje się to inaczej niż myślałem.. #menu oraz #inner_content są już w "komórce" i coś to pogłupiało.
Musiałbyś to zrobić na czystych tabelach, bo potrzebowalibyśmy colspan.
Albo opcja2 mówi: zrób na position: absolute oraz użyj box-sizing. Opcja działa od IE8 w górę. Za dużo tłumaczenia, więc wklejam gotowca, ale sądzę, że poświęcisz chwilę na jego zrozumienie. Swoją drogą - nie rozumiem po co u Ciebie były style typu bottom - nie mają one zastosowania jeżeli position nie jest absolute bądź relative ;) Poczytaj sobie o box-sizing oraz o position właśnie, bo one tworzą tu całą tą "sztuczkę". ---> http://pastebin.com/E1YhQYzD
Uprzejmie prosi się o niezjadanie mnie żywcem za budowę layoutu na absolutach. Jak ktoś ma inne propozycje to czekam. Ja tego inaczej nie widzę (ew tabelki, choć dla mnie są mniej "bezpieczne" niż absoluty).