自动高度div带溢出并在需要时滚动

Question

我正在尝试创建一个没有垂直滚动页面的网站,但我需要其中一个DIV我必须垂直扩展到页面底部(最多),并且当它的内容不适合时,div应该创建一个垂直滚动条.

我已经在这个小提琴中找到了div 内部的css,在需要时创建了滚动条.我也想出了如何使容器div增长到恰好占据页面中的垂直空间.我只是不能让他们一起锻炼!

请记住,在jsfiddle你将无法查看整个网站的内容,从这个意义上说,你得到的第二小提琴并没有真正显示正在做什么,但它按照我的意图工作.

只是另一个注意事项:因为它们是不同的小提琴,第一个小提琴中的id#container div是第二个例子的id #dcontent div.

另外还有一件事:对于一种内容,这个div将垂直滚动,但对于其他类型的内容,我希望它水平滚动,因为它将有一个产品"滑块"在这个DIV内水平显示元素.

另请看这张照片,因为它可能更容易理解我想说的是:PICTURE

我试图寻找有关这些主题的其他问题,但似乎没有一个涵盖我试图解决的所有方面......:S

如果还有其他我可以提供的帮助你/我:)搞清楚,请告诉我!

谢谢!

编辑1:修正错别字

EDIT2:添加图片进行解释

Answer 1

我很惊讶没有人提到过calc().

我无法从你的小提琴中弄清楚你的具体案例,但我理解你的问题:你想要一个height: 100%仍然可以使用的容器overflow-y: auto.

这不是开箱即用的,因为overflow需要一些硬编码的大小约束来知道何时应该开始处理溢出.所以,如果你一起去height: 100px,它会像预期的那样工作.

好消息是,这calc()可以帮助,但它不是那样简单height: 100%.

calc() 允许您组合任意度量单位.

因此,对于您在图片中描述的情况,您包括:

由于粉红色div上方和下方的所有元素都具有已知高度(比如说,200px总高度),因此您可以使用它calc来确定ole pinky的高度:

height: calc(100vh - 200px);

或者,'高度是视图高度的100%减去200px.'

然后,overflow-y: auto应该像魅力一样工作.

Answer 2

好吧,经过长时间的研究,我发现了一个可以满足我需要的解决方法: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>
</div>

可能不适合水平的东西,但是,这是一项正在进行的工作!

我基本上放弃了"初始"盒子 - 盒子内盒子模型,并使用具有动态高度和溢出属性的固定定位.

希望这可能有助于后来发现问题的人!

编辑:这是最终的答案.

Answer 3

快速回答主要观点

与@Joum中最佳选择的答案几乎相同的答案,加快您尝试获得已发布问题的答案,并节省解释在语法中发生的事情的时间 -

回答

将position属性设置为fixed,将top和bottom属性设置为您希望与其父元素相比具有"auto"大小的元素或div的喜好,然后将overflow设置为hidden.

.YourClass && || #YourId{
   position:fixed;
   top:10px;
   bottom:10px;
   width:100%; //Do not forget width
   overflow-y:auto;
}

Wallah!这就是您希望根据屏幕大小和动态传入内容获得动态高度的特殊元素所需的全部内容,同时保留滚动的机会.

Answer 4

您只能使用 flexboxes和overflowproperty来做到这一点。

即使父母的身高也被计算出来。

请参阅此答案或JSFiddle了解详细信息。