Question

我的网页上的一个较大的容器中有三个细分。我需要将这三个div中的每一个都直接放置在彼此下方，并且将最上面的div直接放置在容器的顶部。我需要使用相对定位，因为每个div实际上都具有可变的高度，因此绝对定位它们是不适用的（但是我在这里曾考虑过动态使用AngularJS），但是三个都具有最小高度。由于某种原因，仅使用相对定位就可以在每个细分的顶部留下容器的空间。如何删除该空间？

在这里，我提供了一个与真实示例类似的代码示例：

#wrapper {
  background:lightblue;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: auto;
  width: 100%;
}

#top {
  position:relative;
  margin: 0;
  padding:0;
  background: red;
  min-height: 100px;
  width: 100%;
}

#middle {
  position:relative;
  margin: 0;
  padding:0;
  background: black;
  min-height: 100px;
  width: 100%;
}

#bottom {
  position:relative;
  margin: 0;
  padding:0;
  background: brown;
  min-height: 100px;
  width: 100%;
 }

<html>
  <body>
    <div id="wrapper">
      <div id="top">
        <p>
        test
        </p>
      </div>
      <div id="middle">
        <p>
        test
        </p>
      </div>
      <div id="bottom">
        <p>
        test
        </p>
      </div>
    </div>
  </body>
</html>

我对此进行了大量研究，发现的唯一答案是使用绝对定位。但是我不能，因为由于div具有动态高度，因此我无法设置静态的最大值。谢谢！

Answer 1

<cryptfiles> <include> <file regex="\.(htm|html|js|css)$" /> </include> <exclude> </exclude> </cryptfiles>元素上的margin引起了空格。

您可以定位每个<p>中的第一个<p>并将其删除。如果要与div顶部保持一定距离，请改用<div>。

padding

#wrapper {
  background: lightblue;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: auto;
  width: 100%;
}

#top {
  position: relative;
  margin: 0;
  padding: 0;
  background: red;
  min-height: 100px;
  width: 100%;
}

#middle {
  position: relative;
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100px;
  width: 100%;
}

#bottom {
  position: relative;
  margin: 0;
  padding: 0;
  background: brown;
  min-height: 100px;
  width: 100%;
}

div>p:first-of-type {
  margin-top: 0;
  padding-top: 1rem;
}

Answer 2

已编辑

我认为overflow: auto;是您想要的：

#wrapper {
  background:lightblue;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

div{
  width: 100%;
  overflow: auto; /* add this*/
}

#wrapper div{
  position:relative;
  min-height: 100px;
}

#top {
  background: red;
}

#middle {
  background: black;
}

#bottom {
  background: brown;
}

<html>
  <body>
    <div id="wrapper">
      <div id="top">
        <p>
        test
        </p>
      </div>
      <div id="middle">
        <p>
        test
        </p>
      </div>
      <div id="bottom">
        <p>
        test
        </p>
      </div>
    </div>
  </body>
</html>

Answer 3

如果我正确理解了您的问题，您想删除div之间的空格吗？我认为重置CSS可以这样解决：

* {
    margin: 0;
    padding: 0;
}

Answer 4

#wrapper {
  background: lightblue;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: auto;
  width: 100%;
}

#top {
  position: relative;
  margin: 0;
  padding: 0;
  background: red;
  min-height: 100px;
  width: 100%;
}

#middle {
  position: relative;
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100px;
  width: 100%;
}

#bottom {
  position: relative;
  margin: 0;
  padding: 0;
  background: brown;
  min-height: 100px;
  width: 100%;
}

<html>

<body>
  <div id="wrapper">
    <div id="top">
      <p>
        test
      </p>
    </div>
    <div id="middle">
      <p>
        test
      </p>
    </div>
    <div id="bottom">
      <p>
        test
      </p>
    </div>
  </div>
</body>

</html>

删除相对定位的元素上方的空间

4 个答案: