0

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?

jarlh
  • 42,561
  • 8
  • 45
  • 63
st565
  • 1
  • 1
  • do you want to make main-content bigger to remote white space ? – NullPoiиteя May 17 '15 at 03:18
  • @NullPoiиteя, there is an input box in the footer that utilizes ajax to put content in the "main content" div. I just need to have the main content div take up the entirety of the space between the header, second div, and footer. – st565 May 17 '15 at 17:51

5 Answers5

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

Community
  • 1
  • 1
AmmarCSE
  • 30,079
  • 5
  • 45
  • 53
  • So as I mentioned above, there is an input box in the footer that utilizes ajax to put content in the "main content" div. I just need to have the main content div take up the entirety of the space between the header, second div, and footer. I've tried your methods and it's still acting a bit wonky. Is there anything else you could recommend? – st565 May 17 '15 at 18:13
  • @st565, was the second way(table and table-row) wonky also? – AmmarCSE May 17 '15 at 19:36
  • unfortunately yes. When I made a new index file and tried the table method without any content it worked perfectly. However, once I added in the content from my original index file, it started to not auto adjust in height or width. I'm going to play around with it a bit more to see if I an fix it though. Thanks for your help in the meantime! – st565 May 17 '15 at 19:42
0

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?

Sean Stopnik
  • 1,868
  • 11
  • 9
0

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.

Blake
  • 84
  • 12
0

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)

Alvin Pascoe
  • 1,189
  • 7
  • 5
0

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.

Alvin Pascoe
  • 1,189
  • 7
  • 5