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

Question

I can't get why a position relative div at the bottom of my page leaves, if it goes over the height of the screen, white space underneath. 我不知道为什么页面底部的相对位置div超出了屏幕的高度，即下面的空白。 I have a background-color gradient as bg so i guess i can't replace it with an image. 我的背景色是bg，所以我想我不能用图像代替它。 I can't know the height of the div because i have some php printing inside of it and I can't know how height it will be. 我不知道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>

Any tip? 有小费吗？

Answer 1

You can add a fixed gradient background: 您可以添加固定的渐变背景：

<!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

So I tried playing with your code. 因此，我尝试使用您的代码。

I think your problem is mainly because of the "height: inherit" that you added to the relatively positioned div. 我认为您的问题主要是由于您在相对位置的div中添加了“高度：继承” 。

Try removing that and see if it works. 尝试删除它，看看是否可行。

CodePen: CodePen：

https://codepen.io/anon/pen/mpaXoP 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

I had some similar problems recently. 我最近有一些类似的问题。 I used in a css file 我在css文件中使用

background-attachment: fixed;

For me it worked 对我来说很有效

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

问题描述

3 个解决方案

解决方案1
0 已采纳 2018-01-19 06:49:47

解决方案2
0 2018-01-19 12:38:04

解决方案3
0 2018-01-20 07:04:41

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

问题描述

3 个解决方案

解决方案1 0 已采纳 2018-01-19 06:49:47

解决方案2 0 2018-01-19 12:38:04

解决方案3 0 2018-01-20 07:04:41

解决方案1
0 已采纳 2018-01-19 06:49:47

解决方案2
0 2018-01-19 12:38:04

解决方案3
0 2018-01-20 07:04:41