这是CSS设计中的一个错误吗？
CSS height 100%给出的元素高度实际上大于边距大小的100%。或者从另一个角度看，height:100%设置的不是元素的高度，而是不包括边距的元素的高度 一个结果是，例如，以下无意义的结果。100%的HTML中的100%正文太高，无法容纳100%的HTML，因此产生了一个滚动条这是CSS设计中的一个错误吗？,css,Css,CSS height 100%给出的元素高度实际上大于边距大小的100%。或者从另一个角度看，height:100%设置的不是元素的高度，而是不包括边距的元素的高度 一个结果是，例如，以下无意义的结果。100%的HTML中的100%正文太高，无法容纳100%的HTML，因此产生了一个滚动条 <!DOCTYPE html> <html> <head><title></title> <style> html, body { he
<!DOCTYPE html>
<html>
<head><title></title>
<style>
html, body {
height:100%;
}
#wrapper {
height:100%;
overflow: hidden;
}
#content {
height:100%;
}
</style>
</head>
<body>
<div id='wrapper' style='background-color:lime'>
<div id="header">
<p>line 1</p>
</div>
<div id='content' style='background-color:pink'>
<p>line 2</p>
<p>line 3</p>
</div>
</div>
</BODY>
</HTML>
html，正文{
身高：100%；
}
#包装纸{
身高：100%；
溢出：隐藏；
}
#内容{
身高：100%；
}
第1行
第2行
第3行
这是CSS设计中的一个错误吗？或者在其他情况下，它的行为是否明智？不，这不是CSS中的设计错误 这是块级元素尺寸（宽度和高度）、与边距（将块级元素彼此分隔的间距）和与填充（将块级元素内部与块边界分隔的间距）概念中固有的
作为旁注，我认为这些概念的起源是从印刷出版中继承下来的。不，这不是CSS中的设计错误 这是块级元素尺寸（宽度和高度）、与边距（将块级元素彼此分隔的间距）和与填充（将块级元素内部与块边界分隔的间距）概念中固有的
顺便说一句，我想这些概念的起源是从印刷出版中继承下来的。如果您希望获得100%的视口，请使用
body {
height: 100vh;
width: 100vw;
}
查看解释和浏览器兼容性。如果您希望获得100%到100%的视口，请使用
body {
height: 100vh;
width: 100vw;
}
请查看解释和浏览器兼容性。为什么不使用一个自定义类来包装整个页面内容，并使用背景色？这可能会解决这个问题，边距有助于将图元彼此隔开，但应独立于图元的预期大小。如果希望使用内部间距来表示元素大小，则可以使用填充，尽管其规则略有不同（相邻的边距重叠，而相邻的填充添加在一起）。如果您想要全高，通常的技巧是将正文填充和边距设置为零，并将页面包装在其他容器中。我不是设计专家，但我见过一些设计，其中滚动条始终显示是理想的结果（例如，为了避免菜单栏上的侧移）-因此，使高度高于100%是实现这一点的一种方法。研究“盒子模型”，特别是
盒子大小CSS属性。@torazaburo我已经完成了。当前的盒子模型定义符合所报道的无意义行为。框大小调整解决了各种相关问题，但不是这个问题。它不提供包括边距在内的大小选项。为什么不使用一个自定义类来包装整个页面内容，并使用背景色？这可能会解决这个问题，边距有助于将图元彼此隔开，但应独立于图元的预期大小。如果希望使用内部间距来表示元素大小，则可以使用填充，尽管其规则略有不同（相邻的边距重叠，而相邻的填充添加在一起）。如果您想要全高，通常的技巧是将正文填充和边距设置为零，并将页面包装在其他容器中。我不是设计专家，但我见过一些设计，其中滚动条始终显示是理想的结果（例如，为了避免菜单栏上的侧移）-因此，使高度高于100%是实现这一点的一种方法。研究“盒子模型”，特别是盒子大小CSS属性。@torazaburo我已经完成了。当前的盒子模型定义符合所报道的无意义行为。框大小调整解决了各种相关问题，但不是这个问题。它不提供包括边距在内的大小选项。此外，该示例未能删除垂直滚动条。它还添加了一个水平滚动条，该示例无法删除垂直滚动条。它还添加了一个水平滚动条