Question

我有三个与中心对齐的div，HTML和主体区域超出了窗口，以适应最后一个div，它也添加了滚动条。

出什么问题了，我该如何解决？
另一个非常相似但未能解决问题的问题：Fixed Positioned Div is extending outside of HTML & Body

我的代码

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>

Answer 1

这是在页面底部进行的绝对定位，您将脚注绝对放置在top:100%中，seems to cause overflow通过将元素扩展到body的边界之外。

我注意到top:95%上的.bottom“修复”了这个问题。

但是一个更简单的解决方案是仅使用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>

div扩展到HTML和主体之外

1 个答案: