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

为什么“填充”没有在屏幕上占据其包含元素“顶栏”的全部 50%？

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

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

4

2 回答 2

0

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

于 2012-06-07T00:55:13.600 回答
0

当您对高度和宽度使用百分比时，父元素必须具有特定的像素大小......

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

于 2012-06-07T00:55:35.617 回答