html – 自动高度div与溢出和滚动时需要

发布时间：2020-12-14 21:42:26 所属栏目：资源来源：网络整理

导读：我试图制作一个没有垂直滚动页面的网站，但我需要一个DIV，我必须垂直扩展到页面底部(最多)，当它的内容不适合，div应该创建一个垂直滚轮。我已经拥有了在this fiddle年的3d内部的css，在需要时创建了滚动条。我也想出了how to make容器div成长，占据了页面

我试图制作一个没有垂直滚动页面的网站，但我需要一个DIV，我必须垂直扩展到页面底部(最多)，当它的内容不适合，div应该创建一个垂直滚轮。

我已经拥有了在this fiddle年的3d内部的css，在需要时创建了滚动条。我也想出了how to make容器div成长，占据了页面上的垂直空间。我只是不能让他们一起工作！

请记住，在jsfiddle你将无法查看整个网站的内容，在这个意义上，你得到的第二个小提琴没有真正显示正在做什么，但它的工作原理尽管。

另一个注意事项：因为他们是不同的fiddles，第一个小提琴的id#container div是第二个例子的id = dcontent div。

还有一件事：对于一种类型的内容，这个div会垂直滚动，但是对于其他类型的内容，我希望它能够水平滚动，因为它会在这个DIV中有一个产品“滑块”来水平显示元素。

还请看这张照片，因为它可能会更容易理解我想说的话：PICTURE

我试着寻找关于这些话题的其他问题，但是没有一个似乎涵盖了我正在解决的所有方面

如果有其他的东西我可以提供帮助你/我:)想出来，请让我知道！

谢谢！

EDIT1：固定拼写错误

EDIT2：添加图片进行说明

解决方法

好的，经过长时间的研究，我发现了一个解决方法，我需要：
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>

可能不会与水平的东西工作，但是，这是一个正在进行中的工作！

我基本上放弃了“初始”框 – 内箱内箱模型，并使用动态高度和溢出属性的固定定位。

希望这可能有助于谁找到这个问题！

编辑：这是最后的答案。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!