Question

我刚刚解决了这个问题： Position relative and background-color: can't cover the page 而现在的问题是我底部的div（位置：相对）没有高度，因此我认为没有边缘底部。如果我尝试使用浏览器的元素检查器查看模型，我的html和正文将在屏幕的高度结束。尝试在div，body和html中添加margin-bottom。我也不能假设我的相对定位div的高度，因为有php打印内部未知数量的内容。

<html style="min-height:100%;">
   <head></head>
   <body style="background: linear-gradient(to bottom, #6699ff -13%, #00ffff 133%) repeat-x;background-attachment:fixed;">
      <?php
         print("<br><div></div><div style=\"position:relative;max-width:50%;margin:20px auto;\"><div style=\"position:absolute;top:0;left:0;\" class=\"usage\">Istruzioni:<br> Some php printing.More php printing.");

         print(" Some php printing.</div><div style=\"position:absolute;top:0;right:0;\" class=\"usage\">Stringa in ingresso: <br> More printing.More printing.
         </div></div>");
      ?>
   </body>
</html>

我希望在页面底部有一些边距（我的相对div只包含绝对定位的div）。这是我看到的图像：https://imgur.com/a/bqBmo

Answer 1

通过将列放置在容器div中并浮动它们而不是绝对定位它们，您可以实现您想要的外观而不会丢失容器的填充和边距。需要注意的是，您需要做一个明确的修复，以确保容器足够高，以容纳浮动的孩子。

body {
  background: linear-gradient(to bottom, #6699ff -13%, #00ffff 133%) repeat-x;
  background-attachment: fixed;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 150px;
  background-color: cyan;
  border: 1px solid black;
  text-align: center;
}

.wrapper {
  margin: 70px auto 40px;
  width: calc( 100% - 150px);
  max-width: 400px;
}

.column {
  background-color: black;
  color: white;
  border-radius: 15px;
  padding: 8px;
}

.column:nth-of-type(1) {
  float: left;
}

.column:nth-of-type(2) {
  float: right;
}

.clearfix {
 clear: both;
 }

<html style="min-height:100%;">

<head></head>

<body>
  <nav>Nav</nav>
  <div class="wrapper">
    <div class="column">
      Istruzioni:
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
      <br>asdfsafsa
      <br>etwterwtt
    </div>
    <div class="column">
      Stringa in ingresso: 
      <br> 000111
    </div>
    <div class="clearfix"></div>
  </div>
</body>

</html>

保证金底部为零，而相对定位的div位于页面的末尾

1 个答案: