Problem z wysokością obiektów na stronie

0

Cześć,

mam problem, który ilustruje obrazek.

Jeśli treść w sekcji content jest mniejsza niż okno przeglądarki, chciałbym, żeby sekcja rozciągnęła się na całe okno. Jeśli natomiast jest większa to aside z menu ma być tej samej wysokości. Footer chciałbym mieć zawsze na końcu dokumentu (nie ma być przyklejony do dolnej krawędzie przeglądarki), ale jeśli treści jest mniejsza niż całość wolnego miejsca, footer powinien być przyklejony do krawędzi.
Niestety nie mogę uzyskać takiego zachowania. Sekcja srodkowa rozciąga mi się poprawnie dla:

html, body
{
height: 100%;
background: #3366FF;
margin:0px;
padding:0px;
}

ale jak mam za dużo tekstu to layout mi się rozlatuje. Natomiast jak dam

html, body
{
min-height: 100%;
background: #3366FF;
margin:0px;
padding:0px;
}

to layout mi się nie rozlatuje przy zbyt dużej ilości tekstu, ale jak jest tekstu za mało na całą stronę to footer znajduje się w połowie strony.
Tak samo ta sekcja środkowa nijak nie chce zajmować przyjajmniej całej wielkości ekranu.

Proszę o pomoc.

Szkic layoutu:

user image

Źródło strony:

 <!DOCTYPE html>
<html lang="pl"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">



html, body
{
  height: 100%;
  background: #3366FF;
  margin:0px;
  padding:0px;
  
}

#head
{
height:15%;
background: #123456;
//float:auto;
display: block
padding: 0px;
margin: 0px;
overflow:auto;
}

#middle
{
background: #10A0B0;
min-height: 83%;
color: #ffffff;
}

#middle:after 
{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

#menu
{
float:left;
width:20%;
background: #00FF00;
min-height: 100%;
}

#content
{
float:right;
width:80%;
background:#FF0000;
min-height: 100%;
overflow:auto;
}

#foot
{
display:block;
background: #001122;
//overflow:auto;
color: #ffffff;
height:1em;
}

</style>




<meta charset="UTF-8">
</head>


<body>

<header id="head">
<h1>Tytul strony</h1>
</header>

<section id="middle">
<aside id="menu"><ul><li>LINK2</li><li>LINK1</li><li>LINK3</li><li>LINK4</li><li>LINK5</li></ul></aside>
<section id="content">Lorem ipsum dolor sit amet, consectetur adipiscing
 elit. Vestibulum eu massa orci, sit amet aliquam magna. Aenean nec leo 
sapien. Suspendisse convallis rhoncus lacus, vitae ornare purus vehicula
 non. Etiam interdum arcu vel nunc tincidunt a viverra ipsum varius. 
Praesent lorem magna, posuere id pretium nec, gravida et ipsum. Nulla 
aliquam sapien non magna porta vel blandit nisi malesuada. Sed 
consectetur, lacus nec tempus euismod, massa eros luctus nunc, eget 
rutrum odio lectus quis est.

etium risus lectus. Maecenas ac leo a sapien blandit porta. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Praesent egestas, metus id pellentesque elementum, nulla nibh 
ornare ipsum, vel cursus nunc nibh ut tortor. Donec dignissim, lectus eu
 auctor tristique, nunc dui fermentum nulla, ac rutrum mi elit quis 
metus. Donec tristique vulputate urna eu pretium. Mauris est nisi, 
molestie non lacinia ac, mollis quis elit. Etiam sit amet metus purus, 
sit amet dapibus nulla. </section>
</section>

<footer id="foot">
TO JEST STOPKA
</footer>


</body></html>
0

Nikt nie jest w stanie pomóc?

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