自动高度分区，需要时有溢出和滚动
自动高度分区，需要时有溢出和滚动
提问于 2012-04-14 16:38:14
我试图制作一个没有垂直滚动页面的网站，但是我需要一个div我必须垂直扩展到页面底部(最多)，当它有不适合的内容时，div应该创建一个垂直滚动器。
我已经在这把小提琴中找到了div内部的css，在需要时创建滚动体。我还计算出了如何制作 --容器div增长到了它在页面中的垂直空间。我就是不能让他们一起锻炼！
请记住，在小提琴你将无法查看整个网站的内容，从这个意义上说，你得到的第二小提琴并没有真正显示什么是正在做的，但它的工作，虽然我的意图。
另一个注意事项:由于它们是不同的小提琴，第一小提琴中的id#container div就是第二个例子的id#dcontent div。
还有一件事:对于一种类型的内容，这个DIV将垂直滚动，但是对于其他类型的内容，我希望它水平滚动，因为它将有一个产品“滑块”，在这个div中水平显示元素。
也请看这张照片，因为它可能更容易理解我想说的话：图片
我试着寻找关于这些主题的其他问题，但似乎没有一个问题涵盖了我想要解决的所有方面。:S
如果有什么我可以提供的帮助你/我:)找出它，请告诉我！
谢谢!
EDIT1:固定排版
EDIT2:添加图片解释
Stack Overflow用户
发布于 2017-07-31 08:27:53
这是一个使用FlexBox的水平解决方案，没有烦人的absolute定位。
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: row;
}
#left,
#right {
flex-grow: 1;
}
#left {
background-color: lightgrey;
flex-basis: 33%;
flex-shrink: 0;
}
#right {
background-color: aliceblue;
display: flex;
flex-direction: row;
flex-basis: 66%;
overflow: scroll; /* other browsers */
overflow: overlay; /* Chrome */
}
.item {
width: 150px;
background-color: darkseagreen;
flex-shrink: 0;
margin-left: 10px;
}<html>
<body>
<section id="left"></section>
<section id="right">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10155344
复制相关文章
相似问题
腾讯云开发者
