Question

我有这个css，因为我有两个fixed位置的静态导航栏。但#page取其内容的高度而非屏幕尺寸，因此它不会滚动。

我已经尝试height:100vh;

了

使这个#page占用视图中所有可用空间的任何解决方案都可以使滚动有用吗？

#page {
    position: relative;
    margin-top: 110px;
    margin-left: 220px;
    padding: 15px 15px 15px 15px;
    height: 100%;
    overflow: scroll;
}

导航栏

.navbar-right{
    width: 220px;
    left: 0;
    top: 0;
    margin-top:110px;
    position: fixed;
}

.navbar-top{
    border-bottom-color: #fe6803 !important;
    border-bottom: 5px solid;
    position: fixed;
    height: 110px;
    left:   0;
    width: 100%;
}

Answer 1

这将使页面填满屏幕，并减去上面的边距：

#page {
    position: relative;
    margin-top: 110px;
    margin-left: 220px;
    padding: 15px 15px 15px 15px;
    overflow: scroll;
    height: calc(100vh - 110px);
}

Answer 2

为了制作100％高度的东西，此元素的父元素也需要具有定义的高度。这包括body和html元素，如果它是父元素。

所以，如果#page是另一个div中的div（让我们称之为divA）在body体内。然后需要用100％高度定义html，body，divA和#page。

html, body {
  height:100%;
}

#page {
    position: relative;
    margin-top: 110px;
    margin-left: 220px;
    padding: 15px 15px 15px 15px;
    height: 100%;
    overflow: scroll;
}

在JSFiddle

中

这与宽度的行为不同，因为宽度通常预先定义为100％宽度，而高度是自动的。

页面不占用100％的视野

2 个答案: