可滚动窗口高度分区，第二个分区占用屏幕空间的其余部分
可滚动窗口高度分区，第二个分区占用屏幕空间的其余部分
提问于 2013-03-18 19:00:01
这有可能只使用CSS吗？
我试图把屏幕分割成两个空格：
- 左侧的一个div，其高度总是与屏幕相同，该屏幕将其宽度扩展到其内容，并通过滚动条处理高度溢出。
- 占用剩余屏幕宽度的div，它包装其内容，其高度至少与屏幕高度一样高，而不管内容如何。
下面是我最好的尝试(小提琴)尝试过的一些示例代码：
HTML：
<body>
<div id="items">
<table>
<tr>
<td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
</tr>
<tr>
<td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
</tr>
<tr>
<td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
</tr>
<tr>
<td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
</tr>
<tr>
<td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
</tr>
<tr>
<td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
</tr>
<tr>
<td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
</tr>
<tr>
<td>stuff stss fsfs sfafa sfsfa fsfafafa</td>
</tr>
</table>
</div>
<div id="container">This should expand rest of page width.</div>
</body>CSS：
body {
margin: 0;
padding: 0;
position: absolute;
height: 100%;
}
#items {
height: 100%;
overflow-y: scroll;
border: solid 1px red;
float: left;
}
#container {
min-height: 100%;
border: solid 1px blue;
float: left;
}这非常接近，但是由于第二个div (蓝色边框)无法扩展整个剩余的屏幕宽度，它就会失败。我不想设置%宽度或给任何一个固定的宽度，因为我希望第一个div根据其内容扩展其宽度。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-18 19:04:32
这样做：
html, body {
width: 100%;
height: 100%;
}
#left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
#right {
position: fixed;
top: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll; // or not if you don't want it to
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15484739
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号