CODEWITHSUNDEEP
javascriptjqueryhtmlcss
f00d
f00d

Reputation: 581

how to change div heights based on resize with scrolling included

I've run into an issue where I need 2 divs height to fill up the screen based on resize no matter what the browser dimensions/resolution etc with scrolling included.

Right now without javascript it takes the height based on the body,html with min-height. Which is great! Except when you resize to a smaller size and then scroll downwards. You end up with whitespace. For this example I have two divs side by side. Both 50%. Column1 is with black background color, and Column2 is with a white background color. I've gone and added some javascript and every-time I resize it just keeps adding extra height and the scrollbar becomes incredibly large.

Image one shows it regular. image1 Image two shows it after resizing a little bit. A ton of extra height is added. notice the scrollbar image2

Below is my code.

HTML

 <div id="panelWrapper">
      <div id="column1">
      </div>
      <div id="column2">
      </div>
 </div>

CSS

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

#panelWrapper {
width:100%;
position: absolute;
}

#column1{
position:absolute;
width:50%;
left:0;
right:0;
top:0;
bottom:0;
min-width: 481px;
background-color: #000000;
}

#column2{
position:absolute;
width:50%;
left:50%;
right:0;
top:0;
bottom:0;
background: #FFFFFF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 999;
min-width: 481px;
}

Javascript

var bodyheight = $(document).height();
$("#column1, #column2").height(bodyheight);

$(window).resize(function() {
var bodyheight = $(document).height();
$("#column1, #column2").height(bodyheight);
});

Upvotes: 0

Views: 2622

Answers (2)

LcSalazar
LcSalazar

Reputation: 16821

To keep both divs filling up the height, no matter what size of each other, you don't even need Javascript...

The JS resize event is heavy, and there are many css-only solutions for that.

For example, you could make your #panelWrapper a display: table, and have the column divs to be display: table-cell. That would ensure that they are the same height.

Then, a min-height: 100% on the wrapper would make sure that they always fill up the remaining space when needed:

Here's a simple example showing the concept.

Upvotes: 2

jmore009
jmore009

Reputation: 12923

it's hard to test this on a fiddle but try this out, it should work. You can wrap everything in a function and just call the function on resize:

function adjustHeight(){
  var bodyHeight = $(document).height();
  $("#column1, #column2").height(bodyHeight);
}

adjustHeight(); //call on page load

$(window).resize(adjustHeight); //call on resize

Upvotes: 1

Related Questions