我对 css 和 html 有点问题。我想构建一个具有文章动态高度的页面，其中只有当内容多于窗口高度时滚动条才会出现。
现在的问题是我错过了滚动条的底部箭头。我至少发现它的发生是因为标题的高度为 30 像素，而文章的高度是其父项的 100%元素是正文。
<body>
<header>HEADER</header>
<article>
Lorem ipsum dolor sit amet...
</article>
</body>
使用 CSS，我将样式设置如下:
html,body{
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
header{
height: 30px;
background-color: #f00;
line-height:30px;
}
article{
height: 100%;
overflow-y: auto;
background-color: #aaa;
}
首先我想，我可以通过固定标题的位置并将 padding-top 设置为 30px 来修复它。但这没有帮助，我不想乱用填充和边距来解决我的结构中的问题。
可能有人可以帮助我解决我的问题。因为我不知道如何继续。
这是 JSFiddle:http://jsfiddle.net/o8xspprd/
亲爱的， 丹尼尔
编辑:标题应保持固定，但不使用固定位置，因为在文章中使用 padding-bottom 时我会遇到同样的问题。
EDIT2:除了解决方案帖子中来自 dm4web 的良好解决方案外，我还构建了评论中所述的解决方案。 http://jsfiddle.net/o8xspprd/13/适合我的任务。
最佳答案
- 用div包裹标题和文章
- 去除 html，正文样式溢出
- 向 div 添加溢出:
div{ overflow: hidden;}
编辑 2:
http://jsfiddle.net/o8xspprd/12/
article{height: calc(100% - 30px);}
关于html - 缺少滚动条箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26870706/