Question

看这个例子= https://codepen.io/anon/pen/zaXMXo

* {
  box-sizing: border-box;
}
html, body {
  height: 100%
}
.wrapper {
  background: red;
  min-height: 100%;
}
.left {
  position: absolute;
  width: 200px;
  top: 0;
  bottom: 0;
  background: yellow;
}
.content {
  background: blue;
  margin-left: 230px;
  margin-top: 30px;
  width: 300px;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="content">
            hello content <br />
            hello content <br />
            hello content <br />
            ...
   </div>
 </div>

有人可以告诉我：

1）为什么黄色块没有全高？

2）为什么蓝色块边距顶部在顶部添加空白？

如何解决？

Answer 1

1）为什么黄色块没有全高？

是的，这仅仅是由于第二个问题，看起来好像不是。

2）为什么蓝色块边距顶部在顶部添加空白？

这是由于collapsing margins所致，因为包装容器没有任何顶部或边距（也不是边界顶部），因此它与.content子级的顶部边距合并。您可以在padding-top上设置border-top或.wrapper来减轻这种情况。

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0; /* always good to clean padding and margin on html/body */
  margin: 0;
  height: 100%
}

.wrapper {
  background: red;
  min-height: 100%;
  border-top: 1px green solid; /* border fixes margin collapsing */
}

.left {
  position: absolute;
  width: 200px;
  top: 0;
  bottom: 0;
  background: yellow;
}

.content {
  background: blue;
  margin-left: 230px;
  margin-top: 30px;
  width: 300px;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="content">
            hello content <br />
            hello content <br />
            hello content <br />
            ...
   </div>
 </div>

Answer 2

您给了黄色div position absoulute，使其在屏幕的此部分中形成了div堆栈，而给蓝色div margin-top使其进入了底部。

这就是为什么您在顶部看到白色部分而没有在整个高度看到黄色的原因

将margin:0添加到body以删除角落的空白因此，将您的代码更新为：

html,
body {
    height: 100%;
    margin: 0;
}
.left {
    width: 200px;
    top: 0;
    position: absolute;
    bottom: 0;
    background: yellow;
    height: 100%;
}
.content {
    background: blue;
    margin-left: 230px;
    width: 300px;
}

div边距和绝对位置

2 个答案: