Position relative and background-color: can't cover the page

0
votes

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?

3
phphtmlcss
Could you explain what you are trying to do? As in what is the visual effect you are trying to achieve? That might help us help you. – Craig
and min-height:100vh to body – Temani Afif
This might be totally unrealted, but I suggest using resetcss just to give it a try cuz sometimes the page itself adds some unnecessary padding. – GSquadron
@GSquadron it's not a padding problem, i got a padding:0 on html (this is a small portion of my code but the problem is with the div) – Z. Alessandro
@Craig I want my background-color: gradient [...] to cover the whole page even if a relative positioned div is at the bottom. Now it is overflowing from the height of my page and it is showing some white space underneath. – Z. Alessandro

3 Answers

0
votes

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>
0
votes

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.

Try removing that and see if it works.

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>
0
votes

I had some similar problems recently. I used in a css file

background-attachment: fixed;

For me it worked