3 rækker - umuligt i IE?
Udfordringen er at lave tre rækker over hinanden, hvor den første række er 30px, den sidste er 30px og den mellemste bruger resten af pladsen i parent elementet.Dette kan hurtigt ordnes i Mozilla ved at sætte både top og bottom, men dette virker som bekendt ikke i IE.
Jeg skal have en løsning som virker i IE uden brug af Javascript.
Den midterste række skal have overflow: scroll, saa det er ikke i orden at gøre den midterste række 100% og så bruge margin eller padding til at rykke indholdet ned så det ser ud som om den midterste række først starter under den første række.
Kan dette lade sig gøre? Jeg tvivler.
Her er koden som virker i mozilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type='text/css'>
html, body {
height: 100%;
margin: 0;
border: 0;
}
#outer {
position: absolute;
top: 20%;
left: 20%;
width: 40%;
height: 40%;
border: 1px solid black;
}
#top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-color: purple;
}
#middle {
position: absolute;
width: 100%;
top: 30px;
bottom: 30px;
background-color: yellow;
overflow: scroll;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color: blue;
}
</style>
</head>
<body>
<div id='outer'>
<div id='top'>
top
</div>
<div id='middle'>
middle
</div>
<div id='bottom'>
bottom
</div>
</div>
</body>
</html>
