自动高度分区，需要时有溢出和滚动
我试图制作一个没有垂直滚动页面的网站，但是我需要一个div我必须垂直扩展到页面底部(最多)，当它有不适合的内容时，div应该创建一个垂直滚动器。
我已经在这把小提琴中找到了div内部的css，在需要时创建滚动体。我还计算出了如何制作 --容器div增长到了它在页面中的垂直空间。我就是不能让他们一起锻炼！
请记住，在小提琴你将无法查看整个网站的内容，从这个意义上说，你得到的第二小提琴并没有真正显示什么是正在做的，但它的工作，虽然我的意图。
另一个注意事项:由于它们是不同的小提琴，第一小提琴中的id#container div就是第二个例子的id#dcontent div。
还有一件事:对于一种类型的内容，这个DIV将垂直滚动，但是对于其他类型的内容，我希望它水平滚动，因为它将有一个产品“滑块”，在这个div中水平显示元素。
也请看这张照片，因为它可能更容易理解我想说的话：图片
我试着寻找关于这些主题的其他问题，但似乎没有一个问题涵盖了我想要解决的所有方面。:S
如果有什么我可以提供的帮助你/我:)找出它，请告诉我！
谢谢!
EDIT1:固定排版
EDIT2:添加图片解释
回答 10
Stack Overflow用户
发布于 2012-04-15 16:55:54
嗯，经过长时间的研究，我找到了一个解决办法来满足我的需要：http://jsfiddle.net/CqB3d/25/
CSS：
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#caixa{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
width: 800px;
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
margin-left:auto;
margin-right: auto;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
width: 800px;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 800px;
}HTML：
<div id="framecontentBottom">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
</div>
</div>可能还不适用于横向的东西，但是，这是一个正在进行的工作！
我基本上放弃了“初始”框-内盒-内盒模型，并采用固定定位具有动态高度和溢出特性。
希望这能对以后发现问题的人有所帮助！
编辑:这是最后的答案。
Stack Overflow用户
发布于 2017-08-18 22:08:29
我很惊讶还没有人提到calc()。
我无法从您的摆盘中看出您的具体情况，但我理解您的问题:您需要一个仍然可以使用height: 100%的overflow-y: auto容器。
这是不可行的，因为overflow需要一些硬编码的大小约束来知道何时应该开始处理溢出。因此，如果您使用height: 100px，它将如预期的那样工作。
好消息是能帮上忙，但它不像height: 100%那么简单。
calc()允许您组合任意度量单位。
因此，对于您在图片中描述的情况，您包括：
由于粉红div之上和下面的所有元素都具有已知的高度(比方说，总高度为200px )，您可以使用calc来确定深粉色的高度：
height: calc(100vh - 200px);
或者，“高度是视图高度的100%减去200 of。”
然后，overflow-y: auto应该像魅力一样工作。
Stack Overflow用户
发布于 2016-05-09 18:54:30
快速回答要点
与@Joum中的最佳选择答案差不多，为了加快您对已发布问题的答案的追求，并节省时间来破解语法中正在发生的事情
答案
将位置属性设置为固定，将顶部和底部属性设置为您想要的元素或div，与其父元素相比具有“自动”大小，然后将溢出设置为隐藏。
.YourClass && || #YourId{
position:fixed;
top:10px;
bottom:10px;
width:100%; //Do not forget width
overflow-y:auto;
}瓦拉！这是您所需要的特殊元素，您希望有一个动态高度根据屏幕大小和或动态传入的内容，同时保持滚动的机会。
https://stackoverflow.com/questions/10155344
复制相似问题
腾讯云开发者
