Question

我对css和html有点问题。我想构建一个文章动态高度的页面，只有当窗口高度超过内容时才会出现滚动条。

现在的问题是我想念滚动条的底部箭头。我至少发现它发生是因为标题高度为30px且文章的高度为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;
}

首先我想，我可以通过固定标题的位置并将填充顶部设置为30px来修复它。但这没有用，我不想乱用填充和边距来解决我的结构中的问题。

你可能有人可以帮助我解决我的问题。因为我没有理解如何继续下去。

这里是JSFiddle：http://jsfiddle.net/o8xspprd/

亲爱，丹尼尔

编辑：标题应该保持固定，但不使用固定位置，因为在文章中使用填充底部时我会遇到同样的问题。

EDIT2：除了dm4web在解决方案中的良好解决方案之外，我还建立了评论中所述的解决方案。 http://jsfiddle.net/o8xspprd/13/以适应我的任务。

Answer 1

用div包裹标题和文章
删除html，正文样式溢出
向div添加溢出：div{ overflow: hidden;}

jsfiddle.net/o8xspprd/3/

<强> EDIT2：

http://jsfiddle.net/o8xspprd/12/

article{height: calc(100% - 30px);}

滚动条箭头丢失

1 个答案: