具有可滚动内容的垂直拆分DIV
具有可滚动内容的垂直拆分DIV
提问于 2016-10-04 18:11:06
+------------------+ <-- container - should not be stretched by its contents
|+----------------+|
|| |||
|| ||| <-- main div - as big as container minus footer
|| ||| if content overflows, scrollbar appear
|| |||
|| scrollbar-> H||
|| H||
|| |||
|+----------------+|
|+----------------+| <-- footer - stretched by its contents (button) to
|| [button] || minimal needed height
|+----------------+|
+------------------+。
容器可能没有静态大小，因此解决方案“只计算主div的高度”不是一个选项(当然没有JS )
HTML5，不需要向后兼容。
回答 4
Stack Overflow用户
发布于 2016-10-04 18:41:27
在CSS3中，您可以使用
height: calc(100% - 60px);60px可以表示页脚的高度。
Stack Overflow用户
发布于 2016-10-04 18:46:27
尝试如下所示：
/* css */
<style>
.container{
position: relative;
height: 100%;
width: 100%;
}
.main{
position: relative;
height: calc{100% - 10%};
width: 100%;
overflow: auto;
}
.footer{
position: relative;
height: 10%;
width: 100%;
}
</style>
<!-- html -->
<div class="container">
<div class="main">
</div>
<div class="footer">
</div>
</div>Stack Overflow用户
发布于 2016-10-04 18:55:04
这就对了；只使用html/flexbox：
您将注意到，在footer div上，当添加<p>标记时，div缩放到最大高度30%，并强制主div再次溢出内容。
应该在没有静态容器高度/宽度的情况下工作，我猜它依赖于父容器。
第一:内容最少
<!DOCTYPE html>
<html>
<head>
<style>
.container{
height:200px;
width:400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.main{
width:100%;
background-color:blue;
overflow-y: scroll;
}
.main p{
color:white;
}
.footer{
max-height:30%;
width:100%;
background-color:red;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
<p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
<p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
</div>
<div class="footer">
<span>Trump2016</span>
</div>
</div>
</body>
</html>
第二:添加内容(显示容器wills缩放和强制主div向上)。
<!DOCTYPE html>
<html>
<head>
<style>
.container{
height:200px;
width:400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.main{
width:100%;
background-color:blue;
overflow-y: scroll;
}
.main p{
color:white;
}
.footer{
max-height:30%;
width:100%;
background-color:red;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
<p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
<p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
</div>
<div class="footer">
<span>Trump2016</span>
<p>Trump2016</p>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39849621
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号