html - CSS 宽度和边距百分比不符合我的要求

标签 html css

<html>
<head>
<style>
html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
* { margin: 0; padding:0; }
.topbar {
   min-width: 100%;
   min-height: 50%;
   background-color: green;
}
.fill {
  min-width: 100%;
  min-height: 50%;
  background-color: white;
}
.container {
  min-width: 100%;
  min-height: 50%;
  background-color: blue;
}
</style>


</head>
<body>
<div class="topbar">
  "topbar
  <div class="fill">
    "fill"
    <div class="container">
     "container" 
    </div>
  </div>
</div>
</body>
</html>

为什么“fill”没有占据屏幕上其包含元素“topbar”的完整 50%？

为什么“容器”没有在屏幕上完全“填充”其包含元素的 50%？

单独的问题: 我的目标是创建一个适合几乎所有屏幕台式机/笔记本电脑的布局。我现在不关注电话屏幕布局。我正在尝试使用宽度和高度作为布局的百分比。请建议这是否是正确的方法或指出替代方案。

最佳答案

因为body的高度是不确定的，需要父dom

关于html - CSS 宽度和边距百分比不符合我的要求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10924192/