如何为元素设置正确的高度？ [复制]
Posted
技术标签:
【中文标题】如何为元素设置正确的高度？ [复制]【英文标题】：How can I set right height for the elements? [duplicate] 【发布时间】：2019-04-07 00:33:00 【问题描述】：我为html 和body 设置了height = 100%，但我看到了垂直滚动。如果没有滚动条，我如何适应我的body？
另外，我将height = 50% 的两个div 元素放入body，但我看到底部边框超出了body 的区域。为什么会发生，我该如何解决？
html, body
height: 100%;
body
border-color: #00cc00;
border-width: thin;
border-style: solid;
min-height: 100%;
.div1
border-color: #0099ff;
border-width: thin;
border-style: solid;
height: 50%;
width: 50%;
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Sandbox</title>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>【问题讨论】：
【参考方案1】：边框大小是问题所在。我从div1 中删除了边框并添加了background-color。你不会看到 div 出去。
此外，如果您从正文中删除边框样式并添加margin:0; 和padding:0;，那么您将看不到滚动条。 （我保留边界以查看第一个问题的修复）
请看下面的片段：
html, body
height: 100%;
margin:0;
padding:0;
body
border-color: #00cc00;
border-width: thin;
border-style: solid;
min-height: 100%;
.div1
background-color:red;
height: 50%;
width: 50%;
.div2
background-color: pink;
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Sandbox</title>
</head>
<body>
<div class="div1"></div>
<div class="div1 div2"></div>
</body>
</html>盒子大小
如果您需要边框，那么您可以使用box-sizing:border-box 样式作为 div。
请参阅下面的片段：（从正文中删除 margin-bottom:10px;，这样您就不会看到滚动条）
html, body
height: 100%;
margin:0;
padding:0;
body
border-color: #00cc00;
border-width: thin;
border-style: solid;
min-height: 100%;
box-sizing: border-box;
margin-bottom:10px;
.div1
border-color: #0099ff;
border-width: thin;
border-style: solid;
height: 50%;
width: 50%;
box-sizing: border-box;
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Sandbox</title>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>【讨论】：
【参考方案2】：由于 body 元素的默认边距而出现侧滚动。
为避免这种情况，您需要为正文设置margin: 0;。
也可能由于box-sizing 属性而发生。只需设置 box-sizing: border-box; 即可使 div 大小为 50%，包括边框厚度
html, body
height: 100%;
box-sizing: border-box;
body
border-color: #00cc00;
margin: 0;
border-width: thin;
border-style: solid;
min-height: 100%;
.div1
box-sizing: border-box;
border-color: #0099ff;
border-width: thin;
border-style: solid;
height: 50%;
width: 50%;
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Sandbox</title>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>【讨论】：
【参考方案3】： HTML height:100%;
body position:absolute; top:0; bottom:0; right:0; left:0;
border-color: #00cc00;
.div1
border-color: #0099ff;
border-width: thin;
border-style: solid;
height: 50%;
width: 50%;
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Sandbox</title>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>【讨论】：
或者你可以改变代码 "HTML height:100vh; body height: 100vh; min-height: 100vh; position:absolute; top:0; bottom:0; right:0;左：0；"【参考方案4】：问题是由您在不同元素上包含的边框的像素宽度引起的。通过使用 box-sizing 属性，您可以告诉浏览器在进行百分比计算时需要考虑元素的边框宽度，例如高度和宽度。
您还可以使用overflow-y: hidden; 隐藏垂直滚动条。
这是实现此目的所需的最少代码：
<html>
<head>
<title>Sandbox</title>
<style>
html, body
box-sizing: border-box;
padding: 0;
margin: 0;
overflow-y: hidden;
body
border: 1px solid #00cc00;
.div1
box-sizing: border-box;
border: 1px solid #0099ff;
height: 50%;
width: 50%;
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
【讨论】：
以上是关于如何为元素设置正确的高度？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
在 Flutter 中，如何为 Card 中的子元素动态分配高度？