相对位置和背景颜色：无法覆盖页面 [英] Position relative and background-color: can't cover the page
本文介绍了相对位置和背景颜色：无法覆盖页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法理解为什么我页面底部的位置相对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> ;）;
在div中打印一些php
print（< / div>< div style = \position：absolute; top：0; right：0; \class = \使用'\\\\\\\\\\'>在ingresso中的Stringa：< br>更多打印
< / div>< / div>）;
？>
< / body>
< / html>
任何提示？
解决方案
<！doctype html>
< html>
< head>
< meta charset =UTF-8>
< title>无标题文档< / title>
< style>
html {min-height：100％; }
ody {
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：线性渐变（180deg，＃6699ff 0％，＃00ffff 100％）;
背景重复：不重复;
background-position：center center;
background-attachment：fixed;
margin：0px;
padding：0px;
}
.main-container {
position：relative;
最大宽度：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;类= 用法 >
< p> Istruzioni：< br>
在div内打印一些php< / p>
< / div>
< div style =position：absolute; top：0px; right：0px;类= 用法 >
< p> ingresso中的Stringa：< br>
更多打印< / p>
< p>更多打印< / p>
< p>更多打印< / p>
< p>更多打印< / p>
< p>更多打印< / p>
< p>更多打印< / p>
< p>更多打印< / p>
< p>更多打印< / p>
< p>更多打印< / p>
< / div>
< / div>
< / body>
< / html>
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. I have a background-color gradient as bg so i guess i can't replace it with an image. 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.
<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?
解决方案
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>
这篇关于相对位置和背景颜色：无法覆盖页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
