页面没有采取100％的视图高度

我有这个CSS，因为我有两个与fixed位置的静态导航栏。但#page取得其内容的高度，而不是屏幕大小，因此它不滚动。页面没有采取100％的视图高度

我已经尝试过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%; 
}

来源

2017-09-01 Pablo Casas

你试过'身高：100vh;' – Hash

是@哈希，以为我写下来了，我会编辑帖子。但不起作用 –

这将使该页面填写屏幕，并减去上述保证金：

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

来源

2017-09-01 08:19:51 rblarsen

就像引入'calc'一样。为我工作，谢谢:) –

为了使100％的高度的东西，这个元素的父亲也需要有一个确定的高度。如果它是父级，则包括body和html元素。

因此，如果#page是另一个div内的div（我们称之为divA）。然后html，body，divA和#page需要用100％的高度来定义。

html, body { 
    height:100%; 
} 

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

在JSFiddle

这不同于在行为从宽度宽常常是预先定义的，以100％的宽度，而高度是自动的。

来源

2017-09-01 08:26:15 Grumpy

页面没有采取100％的视图高度

回答

相关问题