问题
I would like an element to fill the remaining space of a parent div. I have managed to do this, You can see it here "link removed" but the filling div (right) sits underneath the left div. I bascially want the right div to start where the left div finishes.
Hope this make sense.
<html>
<head>
<title></title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:#ff0000;
height:20px;
}
#right {
width: 100%;
background-color:#00FF00;
height:30px;
}
</style>
</head>
<body>
<div>
<div id="left">Nav</div>
<div id="right">This is the space I need to fill but not go underneath the nav div</div>
</div>
</body>
</html>
回答1:
On #right, simply remove width: 100%, and add overflow: hidden.
See: http://jsfiddle.net/hJzJf/ - (I'm assuming your heights are just for testing purposes)
Why does this work?
See: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
回答2:
Set margin-left: 180px; on the #right element. This will offset it by the width of the first element.
http://jsfiddle.net/DHSej/
来源：https://stackoverflow.com/questions/6410065/fill-the-space-of-a-div