对容器使用“height：100vh”时，会出现垂直滚动条

我希望内容占用浏览器窗口的全部高度，但不能超出范围。对容器使用“height：100vh”时，会出现垂直滚动条

当使用100vh作为容器高度时，我可以看到垂直滚动条出现。

.container { 
    height: 100vh; 
    border: 3px solid lightsteelblue; 
    border-radius: 10px; 
}

可能是什么问题？

编辑： 更详细的代码：

CSS

html, body { 
    margin: 0; 
    padding: 0; 
} 

* { 
    box-sizing: border-box; 
} 

.container { 
    height: 100vh; 
    margin: 0px; 
    padding: 0px; 
} 

.page_content { 
    height: 85vh; 
    width: 95vw; 
    border: 3px solid lightsteelblue; 
    border-radius: 10px; 
    overflow-y: auto; 
    margin: 0 auto; 
} 

.footer { 
    height: 14vh; 
    width: 95vw; 
    margin: 0px auto; 
    padding: 0px; 

}

HTML

<html> 
    <body> 
    <div class="container"> 
     <div class="page_content"> 
      ... 
     </div> 
     <div class="footer"> 
     ... 
     </div> 
    </div> 
    </body> 
</html>

来源

2017-06-20 cookya

仅供参考。在移动浏览器上，100vh可能并将会表现怪异。请参阅：https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser –

@DanielZiegler谢谢，它不是针对移动浏览器 – cookya

的问题是，你必须与它的边界，而像填充，你必须添加我t到你的身高。

要么你使用这样的：

.container { 
    height: calc(100vh - 3px); 
}

或者这样：

.container { 
    height: 100vh; 
    border: 3px; 
    box-sizing: border-box; 
}

来源

2017-06-20 06:35:13 trichetriche

这是不正确的 –

哪部分不是？ – trichetriche

请使用我的代码 –

ü可以消除由溢出-Y滚动条：隐藏;你应该使用calc函数来删除你的页眉高度例如高度：100vh;

calc（100vh -20px）如果你的标题是20px的高度。所以你得到100vh！

来源

2017-06-20 06:36:04 Alex

默认情况下body和html分配给margin或padding某些像素。尝试使用以下代码。

1vh = veiwport高度的1％ 100vh =高度的100％。

所以永远不要计算高度-3px。这样

body,html { 
    margin: 0; 
    padding: 0; 
} 
* { 
    box-sizing: border-box; 
}

来源

2017-06-20 06:39:13

use 
body{ 
    margin :0px; 
} 
and 
.container { 
    height: 100vh; 
    border: 3px; 
    box-sizing: border-box; 
}

来源

2017-06-20 06:42:33

body { 
    margin: 0; 
} 

.container { 
    height: 100vh; 
    border: 3px solid lightsteelblue; 
    border-radius: 10px; 
    box-sizing: border-box; 
}

这并获得成功。请参阅并在此处进行测试：https://jsfiddle.net/ddan/jsenLgre/

来源

2017-06-20 06:44:38 DDan

对容器使用“height：100vh”时，会出现垂直滚动条

回答

相关问题