我希望有两个div并排,左边一个固定,右边一个填充屏幕的其余部分.但是,当右侧div包含超出其可用宽度的内容时,右侧div不应低于左侧Div但可以滚动.也就是说,两个Div保持并排,右边Div有一个滚动条.
在右侧div上设置宽度%显示我正在追求但正确的Div从不填充剩余空间,就像你需要将正确的Div宽度设置为100% - leftDiv.width ...
这就是我所拥有的.
谢谢
<style type="text/css">
#leftDiv{
width: 200px;
float: left;
}
#rightDiv{
float: left;
overflow: auto;
/* width: 50%; */
}
</style>
<div id="leftDiv">
Left side bar
</div>
<div id="rightDiv">
Some_really_long_content_which_should_make_this_Div_scroll
</div>
编辑
我可以通过一些像这样的jQuery获得我想要的效果,但我更喜欢只有css的解决方案.
$(window).bind('resize', function () {
$('#rightDiv').width($(this).width() - 220 );
});
哇,这是一个艰难的.大多数网站都有固定宽度以避免此类问题.
我相信以下是你想要的.我在firefox中测试了它,即和safari.你将不得不陷入高度,以获得完美的ie.
注意:我不确定这对其他doctypes有何用处.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>foo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>
<style type="text/css">
* {
border:none;
margin:0;
padding:0;
}
#leftDiv {
float: left;
width: 200px;
background-color:lightgreen;
position:absolute;
top:0px;
left:0px;
}
#rightDiv {
width:100%;
background-color:lightblue;
}
#padder {
padding-left:200px;
}
#content {
width:100%;
height:100px;
background-color:lightyellow;
overflow:auto;
}
</style>
<div id="leftDiv">
Left side bar
</div>
<div id="rightDiv">
<div id="padder">
<div id="content">
right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_right_div_
</div>
</div>
</div>
</body>
</html>