0

So, I know this is something that has troubled others before me, but I simply cannot make it work. I am currently working on a 1000px width centered background that should go on for the entirety of the page. With height:100%; I can get it to fill the entire screen, but if I have Divs within that requires scrolling, the background is missing at the bottom.

I have searched the internet to solve this problem and have found a bunch of solutions, though none seem to work for me. Among them:

  • Change body position to relative.
  • Change body and or HTML to 100% height and 100% min-height (and every combination between).
  • Change the position of my Divs to all the available positions (absolute, fixed, relative etc.)
  • Try to use table at the Body and then table-rows for my divs.
  • All the various overflow opportunities (I am not interested in scrolling within my Divs)

And many more.

Here is my code.

HTML

<body>
    <div class="headerMenu">
        <div id="wrapper">
            something
        </div>
    </div>
    <div class="signMenu">
        <div class="div_one">
            something
        </div>
        <div class="div_two">
            something
        </div>
    </div>
</body>

CSS

html, body {
margin: 0;
padding: 0;
width: 100%;
height:100%; }

.signMenu {
padding-left: auto;
padding-right: auto;
width: 1000px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: white;
height:100%; }

.div_one {
background-color: rgb(250, 250, 250);
height: 1250px;
width: 400px;
position: absolute;
top:105px;
left: 0px;
margin-left: 30px;
}

.div_two {
background-color: rgb(250, 250, 250);
height: 1200px;
width: 400px;
position: absolute;
top:120px;
right: 0px;
margin-right: 30px;
}

Forget the headerMenu and wrapper for now. The point is, that if/when div one and two exeeds the height of the screen then the scroll bar appears, and when I scroll down the white background from the signMenu goes no further. I want that background to fill the enitire page (with scrolling down no matter how long), and not just the specific window size, which it does with height: 100%;.

I hope that makes sense. I am kind of new to this. Thanks in advance!

user1958149
  • 53
  • 2
  • 6
  • https://stackoverflow.com/q/45497031/3597276 – Michael Benjamin Jul 19 '18 at 23:07
  • Is there a reason `div_one` and `div_two` need to have the absolute position? This removes their ability to stretch `signMenu`, since they are rendering in their own coordinate system. Removing the absolute positioning and floating them, rendering them with flexbox, or using table rows will solve your problem. – Hans Jul 20 '18 at 00:09
  • I tried to change the position of the two divs to relative and used the flexbox, but when the height of the signMenu is still only the height of the windows size (100%) and not the entire page when I scroll down.. :/ – user1958149 Jul 21 '18 at 15:09

0 Answers0