[HTML][CSS] wysokość menu a wysokość strony

0

Witam mam o to taki kod html-a

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<?php include('head.php') ?>
<title> Strona Główna </title> 
<link rel="stylesheet" href=" style.css " type="text/css" />
</head>
<body>
<div id="top"><?php include('top.php') ?></div>
<div id="NAGLOWEK"><?php include('naglowek.php') ?></div>
<div id="MENU">Menu nawigacyjne
<?php include('menu.php') ?>
</div>
<div id="TRESC">Główna</div>
<div id="STOPKA">
<?php include('stopka.php') ?>
</div>
</body>
</html>

i taki css

      html, body {
      margin-right: auto;
      margin-left: auto;
      background-color: #fff;
      color: #000;
      width: 780px;
      padding: 0;    
       }
      #top {
      width: 780px;
      }
      #NAGLOWEK {
        background-color: #888;
        }
      #MENU {
      width: 150px;
      float: left;
       overflow: hidden;
       background-color: #ccc;
      }
      #TRESC {
        width: 630px;
        float: left;
        overflow: hidden;
      background-color: #fff;
      }
      #STOPKA {
      clear: both;
      width: 100%;
      background-color: #888;
      }
      ul, ul li {
       display: block;
      list-style: none;
      margin: 0;
      padding: 0;
      }

Chodzi mi o to, że długość menu nie jest dopasowana do długości strony
jak dodam do #menu
padding-bottom: 10000px;
margin-bottom: -10000px;
to menu wyjeżdża mi aż za stopkę.
Chyba, że cały szkielet strony zrobionej na divach jest źle zrobiony, także proszę o jakąś podpowiedź

0

użyj height:100%

0

@Loganek:
Twój sposób nie zadziała. Procentowa wartość height działa w sposób, o jakim myślisz, tylko wtedy, gdy blok zawierający ("kontener") ma konkretną, ustaloną wysokość. Tutaj po pierwsze brakuje bloku zawierającego, który można by wykorzystać (zresztą zaraz będę swini radził go wprowadzić), a po drugie, jego wysokość nie mogłaby być na sztywno ustalona. Musiałaby zależeć od wysokości treści i samego menu. To tak, jakby pies gonił swój własny ogon: wysokość menu miałaby zależeć od wysokości kontenera, a wysokość kontenera zależałaby od wysokości treści i... wysokości menu.

@swinia:
Rozumiem, że chcesz po prostu osiągnąć układ dwukolumnowy, przy czym jedna kolumna to menu, a druga to treść. No i obie kolumny muszą mieć wizualnie tę samą wysokość. Można to osiągnąć przynajmniej na dwa sposoby.

Po pierwsze, nie obędzie się bez wprowadzenia elementu zawierającego. Wprowadź dodatkowy element, na przykład #GLOWMY (ja używam innego nazewnictwa... nazwałbym go "main", "tresc" nazwałbym "content" itp.). Ten element #GLOWNY to może być div (z braku laku). Musi on otaczać zarówno #MENU, jak i #TRESC.

Coś takiego:

<div id="GLOWNY">
  <div id="MENU">...</div>
  <div id="TRESC">...</div>
</div>

Teraz zastosuj tę sztuczkę, którą chciałeś:

#MENU {
  ...
  margin-bottom: -10000px;
  padding-bottom: 10000px;

Faktycznie, #MENU będzie wystawało za stopkę. A powinno sięgać dokładnie do końca elementu #GLOWNY i ani piksela dalej. Możemy o to łatwo zadbać -- przyciąć wszystko, co wystaje za #GLOWNY, używając overflow: hidden:

#GLOWNY {
  overflow: hidden;
}

I działa.

Drugi sposób jest znacznie prostszy, ale wymaga użycia obrazka. Myślę, że na przyszłość warto znać oba sposoby. Ten drugi nazywa się "faux columns". Tu również potrzebny jest element zawierający (#GLOWNY). Ale nie bawisz się w to -10000px i tak dalej. Dodajesz #GLOWNY i po prostu ustawiasz mu dwukolorowy obrazek tła (background-image), nawet o wysokości jednego piksela. Pierwsze 150 pikseli (w poziomie) obrazka robisz szare, dajesz background-repeat: repeat-y i voila! Metoda ta jest opisana szerzej tutaj: http://www.alistapart.com/articles/fauxcolumns/. Jest naprawdę bardzo prosta i często w pełni wystarczająca.

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