Question

<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>

为什么“填充”没有在屏幕上显示其包含元素“topbar”的完整50％？

为什么“容器”没有在屏幕上完整地将50％的包含元素“填充”？

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

Answer 1

因为身体的高度不确定。你需要一个父dom

Answer 2

当您使用百分比作为高度和宽度时，父元素在像素中具有特定大小非常重要...

在这种情况下，“topbar”类的大小应为像素

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

2 个答案: