设置高度等于浏览器高度

-2

我们正面临高度问题。我们希望使页面高度达到浏览器视图的100％，但是如果将高度设置为100％，那么滚动条就在那里。设置高度等于浏览器高度

如果将截面高度设置为90％左右，则滚动条会隐藏在某个屏幕中，但不会全部隐藏。标头的固定高度（50px）。有没有什么办法根据浏览器的高度来得到确切的百分比？

html,body {margin:0;height:100%;width:100%;} 
 

 
header { 
 
    height:50px; 
 
    background:blue; 
 
    color:#fff; 
 
} 
 
section { 
 
    height:100%; 
 
    background:red; 
 
}

<header>header</header> 
 
<section></section>

来源

2016-07-27 Muhammad Ali Hassan

包含问题本身重现问题所需的最少代码。 – Pugazh

您可以在body做overflow:hidden;，或者你可以使用calc代替：

height:calc(100% - [height of navbar]);`

所以你的CSS：

#content { 
    height:calc(100% - 50px); 
}

html,body {margin:0;height:100%;width:100%;} 
 
header { 
 
    height:50px; 
 
    background:blue; 
 
    color:#fff; 
 
} 
 
section { 
 
    height:calc(100% - 50px); 
 
    background:red; 
 
}

<header>header</header> 
 
<section></section>

html,body {margin:0;height:100%;width:100%;overflow:hidden;} 
 
header { 
 
    height:50px; 
 
    background:blue; 
 
    color:#fff; 
 
} 
 
section { 
 
    height:100%; 
 
    background:red; 
 
}

<header>header</header> 
 
<section></section>

来源

2016-07-27 13:54:38 Albzi

谢谢，这是我想要的 –

CSS

.my-div{ 
    height: 100vh; 
}

来源

2016-07-27 13:52:14

这将删除您的上限我猜。 – Pirate

要解决这一点，你可以使用overflow: hidden

<body style"height:100%; overflow:hidden;">

希望这将有助于。

来源

2016-07-27 13:52:16 Pirate

你可以尝试把

体
{
高度：100vh;
}

高度将为屏幕（视口）的100％高度。

你可以提供jsfiddle链接，如果它仍然不工作？

来源

2016-07-27 13:54:26 Abhishek

设置高度等于浏览器高度

回答

相关问题