Question

我正在尝试使用内容div扩展包装器，它工作正常，直到我向内容div添加一些顶部定位然后内容div从包装器溢出

我在包装器上尝试了溢出自动似乎可以工作但是添加了不需要的滚动条，隐藏了只是剪辑内容div的结束.....无论如何，使用TOP定位方法时包装器会自动扩展，也许我需要在包装底部添加填充来补偿？ - 虽然我想在具有不同内容高度的多个页面上使用相同的包装器ID

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #FC0;
}
#content {
  position: relative;
  height: 400px;
  width: 300px;
  margin: 0 auto;
  top: 200px;
  text-align: center;
  font-size: 24px;
  background-color: #F60;
}

＆＃13;

<div id="wrapper">

  <div id="content">
    Content...
  </div>

</div>

＆＃13;

Answer 1

它与位置相关有关。将位置视为“冻结”元素的边界。如果修改位置，它将不会更改原始边界框，只是更改它在屏幕上的显示方式。所以你的包装器仍然认为子元素的高度为300px，顶部的200px没有注册为高度。

最简单的解决方法是添加margin-top而不是使用top。

margin: 200px auto 0;

CSS Wrapper在使用＆＃34; top＆＃34;时不会扩展定位

1 个答案: