Html 如何设置元素的正确高度？_Html_Css

Html 如何设置元素的正确高度？

html css

Html 如何设置元素的正确高度？,html,css,Html,Css,对于html和body，我将height=100%，但我看到了垂直滚动。如果没有滚动条，我如何安装我的机身另外，我将两个高度为的div元素放入body中，但我看到底部边框超出了body的区域。为什么会发生这种情况？我如何修复它 html，正文{ 身高：100%； } 身体{ 边框颜色：#00cc00；边界宽度：薄；边框样式：实心；最小高度：100%； } .1分部{ 边框颜色：#0099ff；边界宽度：薄；边框样式：实心；身高：50%；宽度：50%； } 沙箱边框大小是问题

对于

html

和

body

，我将

height

=100%，但我看到了垂直滚动。如果没有滚动条，我如何安装我的

机身

另外，我将两个高度为

的div
元素放入body
中，但我看到底部边框超出了body
的区域。为什么会发生这种情况？我如何修复它

html，正文{
身高：100%；
}
身体{
边框颜色：#00cc00；
边界宽度：薄；
边框样式：实心；
最小高度：100%；
}
.1分部{
边框颜色：#0099ff；
边界宽度：薄；
边框样式：实心；
身高：50%；
宽度：50%；
}

沙箱
边框大小是问题的根源。我已经从div1
中删除了边框，并添加了背景色。你不会看到迪夫出去。
此外，如果从正文中删除边框样式并添加margin:0和填充：0然后您将不会看到滚动条。（我保留边界以查看第一个问题的修复）
请参见下面的代码段：

html，正文{
身高：100%；
保证金：0；
填充：0；
}
身体{
边框颜色：#00cc00；
边界宽度：薄；
边框样式：实心；
最小高度：100%；
}
.1分部{
背景色：红色；
身高：50%；
宽度：50%；
}
.第2分部{
背景颜色：粉红色；
}

沙箱
边框大小是问题的根源。我已经从div1
中删除了边框，并添加了背景色。你不会看到迪夫出去。
此外，如果从正文中删除边框样式并添加margin:0和填充：0然后您将不会看到滚动条。（我保留边界以查看第一个问题的修复）
请参见下面的代码段：

html，正文{
身高：100%；
保证金：0；
填充：0；
}
身体{
边框颜色：#00cc00；
边界宽度：薄；
边框样式：实心；
最小高度：100%；
}
.1分部{
背景色：红色；
身高：50%；
宽度：50%；
}
.第2分部{
背景颜色：粉红色；
}

沙箱
由于主体元素的默认边距，会出现侧滚动。
要避免这种情况，您需要设置margin:0用于正文。
由于框大小调整
属性，也可能发生这种情况。只需设置框大小：边框框使div大小为50%，包括边框厚度

html，正文{
身高：100%；
框大小：边框框；
}
身体{
边框颜色：#00cc00；
保证金：0；
边界宽度：薄；
边框样式：实心；
最小高度：100%；
}
.1分部{
框大小：边框框；
边框颜色：#0099ff；
边界宽度：薄；
边框样式：实心；
身高：50%；
宽度：50%；
}

沙箱
由于主体元素的默认边距，会出现侧滚动。
要避免这种情况，您需要设置margin:0用于正文。
由于框大小调整
属性，也可能发生这种情况。只需设置框大小：边框框使div大小为50%，包括边框厚度

html，正文{
身高：100%；
框大小：边框框；
}
身体{
边框颜色：#00cc00；
保证金：0；
边界宽度：薄；
边框样式：实心；
最小高度：100%；
}
.1分部{
框大小：边框框；
边框颜色：#0099ff；
边界宽度：薄；
边框样式：实心；
身高：50%；
宽度：50%；
}

沙箱
问题是由不同元素上包含的边框的像素宽度引起的。通过使用“框大小”属性，可以告诉浏览器，在进行百分比计算（例如高度和宽度）时，浏览器需要考虑图元的边框宽度
您还可以使用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>


沙箱
html，正文{
框大小：边框框；
填充：0；
保证金：0；
溢出y：隐藏；
}
身体{
边框：1px实心#00cc00；
}
.1分部{
框大小：边框框；
边框：1px实心#0099ff；
身高：50%；
宽度：50%；
}
问题是由不同元素上包含的边框的像素宽度引起的。通过使用“框大小”属性，可以告诉浏览器，在进行百分比计算（例如高度和宽度）时，浏览器需要考虑图元的边框宽度
您还可以使用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>


沙箱
html，正文{
框大小：边框框；
填充：0；
保证金：0；
溢出y：隐藏；
}
身体{
边框：1px实心#00cc00；
}
.1分部{
框大小：边框框；
边框：1px实心#0099ff；
身高：50%；
宽度：50%；
}

HTML{height:100%；}
主体{位置：绝对；顶部：0；底部：0；右侧：0；左侧：0；
边框颜色：#00cc00；
}
.1分部{
边框颜色：#0099ff；
边界宽度：薄；
边框样式：实心；
身高：50%；
宽度：50%；
}

沙箱

HTML{height:100%；}
主体{位置：绝对；顶部：0；底部：0；右侧：0；左侧：0；
边框颜色：#00cc00；
}
.1分部{
边框颜色：#0099ff；
边界宽度：薄；
边框样式：实心；
身高：50%；
宽度：50%；
}

沙箱
或者您可以更改代码“HTML{height:100vh；}body{height:100vh；min height:100vh；position:absolute；top:0；bottom:0；right:0；left:0；}”，或者您可以更改代码“HTML{height:100