Buduję właśnie template i mam następujący problem.
Chcę uzyskać element #main na całą wysokość strony (uwaga! całą wysokość, nie tylko na wysokość okna, ale pełne 100% niezależnie od długości treści)
Budowa wygląda mniej więcej następująco:
Kod
(#main: [#menu-bar][#content] )
Problem jest tego typu, że jak wspomniałem #main ma mieć 100% height, niezależnie od treści. Kiedy dla #menu-bar lub #content przypisuję
Kod
float: left;
to height: 100%; w #mainie automatycznie przestaje działać tak jak powinien i rozciąga się tylko na wysokość okna. Kiedy float wyrzucę, to działa ok.
Trochę kodu źródłowego, może pomoże:
Kod
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#main {
width: 100%;
background-color: red;
min-height: 100%;margin: 0 auto;
}
* html #main {
height: 100%;
}
#menu-bar {
width: 74px;
height: 100%;
background: url(template_images/menu-bar.png);
background-repeat: y-repeat;
display: inline;
text-align: center;
height: 100%;
float: left;
}
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#main {
width: 100%;
background-color: red;
min-height: 100%;margin: 0 auto;
}
* html #main {
height: 100%;
}
#menu-bar {
width: 74px;
height: 100%;
background: url(template_images/menu-bar.png);
background-repeat: y-repeat;
display: inline;
text-align: center;
height: 100%;
float: left;
}
Kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type"/>
<link href="global.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="menu-bar">
menu menu menu
</div>
<div id="artist-content">
contetn
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type"/>
<link href="global.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="menu-bar">
menu menu menu
</div>
<div id="artist-content">
contetn
</div>
</div>
</body>
</html>
Czy znacie jakiś sposób na rozwiązanie tego sporu między float i height w elemencie rodzica? To dla mnie dziwne, bo z reguły to rodzic nadaje rozmiar, a dziecko się ewentualnie dostosowuje, a tu jest odwrotnie.
Proszę o wszelkie rady,
Dziękuję.
- Konrad