CSS中的vh和百分比？
Posted
技术标签:
【中文标题】CSS中的vh和百分比？【英文标题】：vh and percentage in CSS? 【发布时间】：2019-12-16 20:03:49 【问题描述】：我试图让.navbar 屏幕的一半，但它没有正确显示。我不确定为什么？我猜还有另一个容器，但我不知道为什么？
我将 body 设置为 100vh 以覆盖屏幕
我有 .navbar 使用百分比的一半
html 文件：
body
background-color: red !important;
width: 100vh;
height: 100vh;
.navbar
width: 50%;
background-color: white;
.navbarButtons
background-color: aqua;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="navbar">
<div class="navbarButtons">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
</div>
</div>【问题讨论】：
你应该为 .navbar 类添加 height:50vh 从 .all 类中移除宽度和高度 % 不接受弹性高度和窗口高度 从 .all 类中删除宽度或在该类中使用 width: 100vw 你想在哪里包含图片？ 【参考方案1】：我想，与其使用vh，不如使用% 方法。
试试下面的 CSS：
html,
body
box-sizing: border-box;
height: 100%;
background-color: red;
.navbar
height: 50%;
width: 50%;
background-color: white;
.navbarButtons
background-color: aqua;
【讨论】：
我尝试在正文中使用百分比，但它并没有覆盖整个页面，只是一个很小的部分。【参考方案2】：第一边注：
vh 和 vw 之间存在差异。您应该添加：
width: 100vw //vw is view width
height: 100vh // vh is view height
要使标题高度为屏幕的一半，只需添加：
height: 50vh
工作片段：
body
background-color: red !important;
width: 100vw;
height: 100vh;
.navbar
width: 100%;
height: 50vh;
background-color: white;
.navbarButtons
background-color: aqua;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="navbar">
<div class="navbarButtons">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
</div>
</div>【讨论】：
【参考方案3】：除了 Kareem 答案，您需要更新一些样式，其他宽 vh 视图高度 50 将适用于所有浏览器。
.all
background-color: red;
.navbar
background-color: white;
height: 50vh;
.navbarButtons button
background-color: aqua;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="% static " NavBarHtml.css " %" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="all">
<div class="navbar">
<div class="navbarButtons">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
</div>
</div>
</body>
</html>【讨论】：
以上是关于CSS中的vh和百分比？的主要内容，如果未能解决你的问题，请参考以下文章
20CSS中单位：px和%em和remvw|vh|vmin|vmax的区别