Question

我无法理解为什么页面底部的位置相对div离开，如果它越过屏幕的高度，下方的空白区域。我有一个背景颜色渐变作为bg所以我想我不能用图像替换它。我不知道div的高度，因为我内部有一些php打印，我不知道它的高度。

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

任何提示？

Answer 1

您可以添加固定的渐变背景：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
html { min-height: 100%; }

body {
    background-image: -webkit-linear-gradient(270deg, #6699ff 0%, #00ffff 100%);
    background-image: -moz-linear-gradient(270deg, #6699ff 0%, #00ffff 100%);
    background-image: -o-linear-gradient(270deg, #6699ff 0%, #00ffff 100%);
    background-image: linear-gradient(180deg, #6699ff 0%, #00ffff 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    margin: 0px;
    padding: 0px;
}

.main-container {
    position: relative;
    max-width: 50%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
}

.usage {
    padding-top: 20px;
    padding-bottom: 20px;
}
</style>
</head>

<body>
<div class="main-container">
  <div style="position: absolute; top: 0px; left: 0px;" class="usage">
    <p>Istruzioni:<br>
      Some php printing inside the div</p>
  </div>
  <div style="position:absolute; top:0px; right:0px;" class="usage">
    <p>Stringa in ingresso: <br>
      More printing </p>
    <p>More printing </p>
    <p>More printing</p>
    <p> More printing</p>
    <p>More printing </p>
    <p>More printing</p>
    <p>More printing</p>
    <p>More printing</p>
    <p>More printing</p>
  </div>
</div>
</body>
</html>

Answer 2

所以我尝试使用你的代码。

我认为您的问题主要是因为您添加到相对定位的div的＆＃34; height：inherit＆＃34; 。

尝试删除它并查看它是否有效。

<强> CodePen：

https://codepen.io/anon/pen/mpaXoP

<html style="min-height:100%;">

<head></head>

<body style="background: linear-gradient(to bottom, #6699ff -13%, #00ffff 133%) repeat-x;">
    <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 inside the div
        </div>
        <div style="position:absolute;top:0;right:0;" class="usage">Stringa in ingresso:
            <br> More printing
        </div>

    </div>
</body>

</html>

Answer 3

我最近遇到了类似的问题。我在css文件中使用

background-attachment: fixed;

对我而言，它起作用了

位置相对和背景颜色：无法覆盖页面

3 个答案: