9 svar · 258 visningar · startad av Peeer
Hej!
Jag har en div (main) som innehåller två andra divar (left och right). Ingen av divarna har någon fast höjd. Mina frågor är:
Tpfh!
som svar på båda frågorna
i cssen
#left {
float:left;
widht:150px;
height:410px;
overflow:auto;
}
#right {
float:right;
}
.clr {
clear:both;
}
i html
<div id="main">
<div id="left">
lorem ipsum dolor sit amet</div
<div id="right">
dolero dolera dolor color </div>
<div class="clr"> </div>
</div>
Nja, jag vill inte ha någon fast höjd på left. Den ska vara lika hög som right och får inte allt plats så ska det dyka upp en scroll. Men tack ändå :)
jag tror vi missuppfattade varandra nu... var det main som skulle få scroll istället för att tänjas? isåfall sätter du bara en fast höjd på den och overflow:auto.
Nej, main & right ska aldrig ha någon scroll. Main kommer alltid vara lite längre än right (right ligger i main). Left ska även den vara lika lång som right. Har left innehåll som inte får plats så ska left få en scroll.
isåfall har jag ingen lösning för det är först när man sätter en fast höjd som man kan sätta en scroll (som jag uppfattat det)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>001</title>
<style type="text/css">
#main { position:relative; border:solid; }
#left { position:absolute; top:0; left:0; width:150px; height:100%; overflow:auto; background:lime; }
#right { padding-left:150px; background:yellow; }
</style>
</head>
<body>
<div id="main">
<div id="left"> foo <br> bar </div>
<div id="right"> baz </div>
</div>
</body>
</html>
Nu verkar det här bara fungera i Firefox, samt Firefox visar inte någon scrollningslist...
Anledningen till att Firefox inte visade någon scroll var att det inte fick plats med någon! Ökar man line-height (eller innehållet) så kommer det fram en scroll när den behövs.
Nedan har jag fått det att fungera i IE5.5 och IE6 också.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>002</title>
<style type="text/css">
#main { position:relative; border:solid; line-height:10; }
#left { position:absolute; top:0; left:0; width:150px; max-height:100%; overflow:auto; background:lime; }
#right { margin-left:150px; background:yellow; }
</style>
<!--[if gte IE 5.5]>
<style type="text/css">
#main { zoom:1; /* hasLayout */ }
</style>
<script type="text/javascript">
window.attachEvent("onload", function() {
var left = document.getElementById("left");
var mainHeight = document.getElementById("main").clientHeight;
left.style.height = mainHeight > left.clientHeight ? "auto" : mainHeight + "px";
});
</script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="left"> foo <br> bar </div>
<div id="right"> baz </div>
</div>
</body>
</html>
Hoppas det är till nån hjälp. :)
Ska kolla på det där i kväll, hoppas det fungerar :)
Tack så länge iaf :)
/r Det finns inget sätt att lösa det här utan javascript?!
Fråga Microsoft. ;)