我想要的是一个双列CSS布局,带有固定的侧边栏(在右侧),比方说300px宽,以及一个流畅的左手柱,它将扩展以适应屏幕尺寸和高度,然后是如果内容需要,请在左侧列提供垂直滚动条。
如果有人可以提供帮助,我将永远感激。
这是我到目前为止所拥有的......
<html>
<head>
<style type="text/css">
body {margin:0px;}
#outer {
overflow: hidden;
width: 100%;
height:608px;
background: #ddd;
}
#inner1 {
float: right;/* Make this div as wide as its contents */
width:300px;
padding:10px;
background: #fdd;
}
#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
padding:10px;
background: #ddf;
#divScroll {
overflow: scroll;
height:600px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
<div id="divScroll">
inner div 2... <br />
inner div 3... <br />
inner div 2... <br />
.
.
enough text here to make it scroll !
.
.
inner div 2... <br />
inner div 2... <br />
inner div 2... <br />
inner div 2... <br />
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
抱歉,我无法理解这个问题, 这是你想要做的吗? : http://jsfiddle.net/6a9bU/2/
答案 1 :(得分:0)
不确定这是不是你的意思,但我认为你想要这样的东西:
http://jsfiddle.net/spacebeers/s8uLG/3/
你设置你的容器,溢出设置为隐藏,然后在每个div添加负边距底部和相等的正填充底部。
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>