如何扩展HTML和Body外部的DIV?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (263)

我有三个div与中心对齐,HTML和Body区域延伸到窗口之外,以容纳最后一个div,其中还添加了一个滚动条。

我的代码

html,
body {
  margin: 0;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

p {
  margin: 0;
  padding: 0;
  border: 0;
}

.top {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0%);
}

.center {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bottom {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -0%);
}
<html>

<head>
  <title>Position</title>
</head>

<body>
  <div class="container">

    <div class="top">
      <p>I am top div</p>
    </div>

    <div class="center">
      <p>I am center div</p>
    </div>

    <div class="bottom">
      <p>I am bottom</p>
    </div>

  </div>


</body>

</html>

提问于
用户回答回答于

这是绝对的定位,这样做在页面底部,你是绝对地放置页脚top:100%,它会导致溢出通过将元素扩展到body

一个更简单的解决方案是仅仅使用Flexbox:

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column; /*specifies main axis to be vertical*/
  justify-content: space-between; /*main axis positioning*/
  align-items: center; /*cross axis (horizontal) positioning*/
}
<html>

<head>
  <title>Position</title>
</head>

<body>
  <div class="container">

    <div class="top">
      <p>I am top div</p>
    </div>

    <div class="center">
      <p>I am center div</p>
    </div>

    <div class="bottom">
      <p>I am bottom</p>
    </div>

  </div>

</body>

</html>

扫码关注云+社区

领取腾讯云代金券