Question

我们正面临身高问题。我们希望页面高度为浏览器视图的100％，但如果将高度设置为100％，则会出现滚动条。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

<强> CSS

.my-div{
  height: 100vh;
}

Answer 2

您可以尝试放入

body> {
height：100vh;
}

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

如果仍然没有工作，你可以提供 jsfiddle 链接吗？

Answer 3

您可以在overflow:hidden;上执行body，或者您可以使用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>

Answer 4

要解决此问题，您可以使用overflow: hidden

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

希望它会有所帮助。

设置高度等于浏览器高度

4 个答案: