另外两列div查询

-1

我想要的是一个双列CSS布局，带一个固定的侧栏（在右边），假设宽度为300px，并且对于一个可以扩展以适合屏幕的流动左侧列大小和高度，然后如果内容需要，则在左侧栏中提供垂直滚动条。另外两列div查询

如果有人能帮助，我会永远感激。

这里是我迄今为止...

<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>

来源

2011-12-12 Polecat Harris

发表一些你曾说过的'[垃圾]'代码，并用它作为出发点。此外，请花一些时间来查看[faq]。欢迎来到[SO]。 – zzzzBov

请[不要将签名或标语添加到您的帖子]（http://stackoverflow.com/faq#signatures）。 “谢谢，蒂姆。”已经从这个和你以前的问题中删除。 – meagar

看看是否像http://jsfiddle.net/yp76n/2/是你正在寻找的东西。 – justis

不知道这是你的意思，但我想你想是这样的：

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>

来源

2011-12-13 11:41:20 SpaceBeers

非常感谢！正是我想要的！ –

抱歉，我不能明白这个问题非常好，这是你想要做什么？： http://jsfiddle.net/6a9bU/2/

来源

2011-12-12 15:38:02

另外两列div查询

回答

相关问题