Header ze stała wysokością i content do końca strony

Witam!

Chcę mieć układ taki:

• cała góra to header powiedzmy o wysokości 80px
• potem jest pod nim po lewej menu, które ma wysokość pozostałej części strony minus powiedzmy 50px na stopkę.
• po prawej od menu jest content z taką samą wysokością jak menu
• na samym dole jest stopa o stałej wysokości

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.

daj linka do "live" przykładu - takiego, którego mogę sobie sam przeklikać firebugiem.

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>

Tak, pamiętałem o tym, ogólnie to zabrakło w moim kodzie tylko ", html" po body w CSS :).

Kurcze, myślałem, że problem z głowy, ale jednak nie. Okazuje się, że na IE najnowszym nadal to nie działa. FF i Chrome OK.

a dodałeś jak pisałem klasę max_row ?

Tak, na FF i Chrome działa, a na IE ogólny szablon jest ok, ale w środkowym wierszu nie rozciąga inner_content i menu na całą wysokość, a tylko dopasowuje do treści wewnątrz

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).