使用*页面级别*滚动条滚动DIV (其高度设置为可见区域)
这是一张丑陋的图片，展示了我想要达到的目标。基本上，我需要使用页面滚动条来滚动DIV (其高度设置为可见区域)。
在纯html5 5/CSS中，这是可能的吗?如果是的话，如何做到呢？
回答 4
Stack Overflow用户
发布于 2014-11-16 04:34:49
不如用一堆固定位置边框元素来构造你的div呢？就像这样：
<!-- don't forget to declare a doctype -->
<body>
<!-- leave these empty -->
<div id="frameTop"></div>
<div id="frameBottom"></div>
<div id="frameLeft"></div>
<div id="frameRight"></div>
<!-- put stuff in these -->
<div id="top">Content here</div>
<div id="content">
<h3>Page title</h3>
<p>Text here.</p>
</div>
<div id="bottom">Tabs</div>
</body>将borderTop设置为底部边框样式，borderBottom设置为顶部边框样式，然后borderLeft和borderRight具有坚实的背景色以隐藏角落的边框。
编辑：i 找到另一种方法，这可能更好。HTML当然更干净。与其对frameTop、frameBottom等使用空div，不如在body: and和body:after上使用css psuedo元素。然后HTML看起来更像这样：
<body>
<div id="top">Content here</div>
<div class="tab">
<input type="radio" id="tab1" name="tab" class="radioTab" checked="checked" />
<div class="content">
<h3>Tab title</h3>
<p>Text here.</p>
</div>
<label for="tab1">Tab 1</label>
</div>
<div class="tab">
<input type="radio" id="tab2" name="tab" class="radioTab" />
<div class="content">
<h3>Tab title 2</h3>
<p>Different text here.</p>
</div>
<label for="tab2">Tab 2</label>
</div>
</body>看这把小提琴用于使其工作的CSS。我对小提琴中的保证金定义有点懒散，但对于概念的证明来说，它的效果足够好。
Stack Overflow用户
发布于 2014-11-16 05:07:50
我做了一个更完整的小提琴手，演示了如何伪造设计所需的边框。
请注意内容div顶部和底部的额外填充，它的背景色和边框的使用看起来就像内部框是它自己的区域。橙色的一面实际上与它的其余部分滚动，顶部和底部橙色部分连接到页眉和页脚。
html, body{
background-color:orange;
margin:0;padding:0;
}
header{
position:fixed;
top:0;
width:100%;
background-color:orange;
}
footer{
position:fixed;
bottom:0;
width:100%;
background-color:orange;
}
header section, footer section{
background-color:#fff;
height:30px;
}
header .frame{
border-bottom:1px solid #222;
margin:0 30px 0 30px;
height:30px;
}
footer .frame{
border-top:1px solid #222;
margin:0 30px 0 30px;
height:30px;
}
.content{
background-color:#fff;
border-right:1px solid #222;
border-left:1px solid #222;
min-height:100%;
margin:0 30px 0 30px;
padding:60px 24px;
}编辑:刚刚注意到你的脚有点不同，但是你可以调整这个来达到这个效果。
Stack Overflow用户
发布于 2014-11-16 02:09:56
有几种方法可以达到这个效果，因为你要求一个滚动的div，这就是我要做的：
CSS：
div {
width: 100%;
height: calc(100vh - 100px);
overflow: scroll;
}
nav {
width: 100%;
height: 100px;
background: #f00;
}HTML：
<div>some content</div>
<nav>buttons</nav>https://stackoverflow.com/questions/26952919
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号