Kilka elementów DIV i height

0

Witam, chciałbym prosić o pomoc w przy jednym problemie. Chciałbym, aby w poniższym kodzie stopka była na dole strony, a żółta przestrzeń (BODY) miała:

height = height_całej_strony - height_logo - height_menu - height_stopka.

Czyli innymi słowy wypełniała całą pozostałą część strony bez tworzenia suwaka pionowego jeżeli height contentu w BODY nie powiększa jego height-u tworząc automatycznie suwak.

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style>

*
{
  margin:0
}

#base_header
{
  height:150px;
  background-color:green
}

#base_header_inside
{
  max-width:950px;
  background-color:red;
  margin:0 auto;
  height:100%
}

#base_menu
{
  height:30px;
  background-color:blue
}

#base_menu_inside
{
  max-width:950px;
  background-color:orange;
  margin:0 auto;
  height:100%
}

#base_body
{
  height:auto;
  background-color:yellow
}

#base_body_inside
{
  max-width:950px;
  background-color:pink;
  margin:0 auto;
  height:100%
}

#base_footer
{
  height:30px;
  background-color:blue
}

#base_footer_inside
{
  max-width:950px;
  background-color:orange;
  margin:0 auto;
  height:100%
}

</style>

</head>
<body>



<div style="width:100%;height:100%;background-color:#aaa;position:absolute">

  <div id="base_header">
    <div id="base_header_inside">LOGO</div>
  </div>

  <div id="base_menu">
    <div id="base_menu_inside">MENU</div>
  </div>

  <div id="base_body">
    <div id="base_body_inside">BODY</div>
  </div>

  <div id="base_footer">
    <div id="base_footer_inside">STOPKA</div>
  </div>

</div>



</body>
</html>

Pozdrawiam.

0

uzyj box-sizing:

http://jsfiddle.net/8Hqm5/

0

Ok, wszystko fajnie, ale co jeżeli nie znamy (bo jest zmienna) wysokość stopki?

0

javscriptem po zaladowaniu strony obliczaj wysokosci

0

Wydaje mi się, że JS jak i połączenie jQuery i JS to mało estetyczne rozwiązanie. Na pewno jest jakieś rozwiązanie przy użyciu CSS i takiego właśnie chciałbym użyć. Pozdrawiam.

0

Jeżeli nie znałbyś wysokości tylko jednego elementu - to spoko. Jeżeli wymiar dwóch elementów nie jest znany - to zostaje tylko js.

1 użytkowników online, w tym zalogowanych: 0, gości: 1