删除div之间的垂直空白，尤其是在达到断点后

Question

I'm working on a responsive page design at the moment and I'm running into an issue with white-space between the divs, especially after hitting breakpoints.

 body, html { padding: 0; margin: 0; } .header { padding-top: 5px; background-color: red; width: 100%; } .sub-header { padding: 5px; margin: 0px; background-color: yellow; width: 100%; } .main-content { padding: 5px; background-color: blue; width: 100%; } .footer { position: absolute; bottom: 0; padding: 5px; background-color: green; width: 100%; } @media screen and (max-width: 320px) { .sub-header { display: none; } } } 

 <div class="header">Header <div class="sub-header">Sub-Header</div> </div> <div class="main-content">Auto adjust size</div> I want to have the blue div take up the remaining space in this white space, as well as after the sub-header is removed at the break point. <div class="footer">footer</div> 

Here's a quick mock up of what I'm experiencing: http://jsfiddle.net/gaych7vp/6/

I understand what I have to do in order to make it take up the remainder of the white space before it hits a breakpoint (I'm assuming just tweaking the height values), but how would I go about making the blue div take up the remaining white space that gets created when the yellow div gets hidden after hitting the breakpoint?

I'm still really new to javascript but from other answers I've read it could be done by creation a function that finds the height of the browser and then subtracts it from the other divs. Is that possible and if so, how could I accomplish that?

Answer 1

Use position:absolute with different top values

.main-content {
    position:absolute;
    top:51px;
    bottom:0px;
}

and

@media screen and (max-width: 320px) {
    .main-content {
        top: 23px;
    }
}

fiddle

Another approach is using display:table and display:table-row

body, html{
    width:100%;
    height: 100%;
}
body{
    display:table;
}
.main-content {
    width: 100%;
    height: 100%;
    display:table-row;
}

fiddle

Make a div fill the height of the remaining screen space

Answer 2

You can use calc on the .main-content div to calculate the size, but you would need to set the heights of the header, footer, and subheader divs. Seems to me though you could just give the body a background color of blue, and achieve the same thing?

Answer 3

Change

@media screen and (max-width: 320px) {
    .sub-header {
        display: none;
    }
}

to

@media screen and (max-width: 320px) {
    .sub-header {
        visibility: hidden;
    }
}

I think this is what you meant. Fiddle .

Answer 4

There's no need for a JavaScript solution here.

The white area is caused because you are using position: absolute to force the footer to the bottom of the window, regardless of the content.

This isn't the normal way to achieve this, you'll run into issues later on when you do add content to your main-content div. You'll find that the footer will be positioned over this content (this will also happen if you shrink the window vertically).

I think what you'd like to do, is give the main-content div a min-height: , this way, the page won't collapse and look terrible if there is little content, but it will stretch naturally when more content is added.

You can also and remove the position: absolute from the footer div.

Here is a demonstration: http://jsfiddle.net/t46aopas/

** UPDATE **

If you'd like a dynamic solution, I've created a heavily annotated JavaScript example here: http://jsfiddle.net/nahgdkaw/

(I included lots of comments since you said you were new to JavaScript ;) )

That should hopefully help you along the way a little.

Be aware that if the content inside the .main-content div is larger than the .main-content div area, the div will NOT expand to accommodate it.

You can however use the code provided and add in an if statement to, before resizing the .main-content div, check if the .main-content content is larger than the available area (you may need to add a wrapper div around the .main-content content). If so, then resize the .main-content div to match the .main-content content height (otherwise, perform the resize as it currently is).

(Also, I strongly advise against using HTML tables for anything other than tabular data)

Answer 5

I edited my original answer but don't have the reputation points necessary to add a comment to notify you. I'll remove this answer after you've seen my updated answer above.