0

On RWD website design page, i have 918px of height for each boxes am using, how to set a height for the same?

If i set height to auto or 100% it doesn't work, if i fix the height to 918px, it is fine for desktop, but not for the mobile media.

.box{
    background-color:#0c71b8;
    height:100%;
    min-height:918px;   
    }

The boxes are of 960px X 918px in size, and in that box i have images and text contents with a background color for it. So how do i fix a height in percentage?

Sharath-designer
  • 111
  • 3
  • 11

3 Answers3

0

All parent elements of .box need to have a height of 100% then it should work.

mahatmanich
  • 10,791
  • 5
  • 63
  • 82
0

Try below two solutions.

jQuery - Dynamically find the window height and apply same height on html element.

function handleResize() {
  var hgt = $(window).height();
  $('.box').css({'height':hgt+'px'}); // HTML element names
}

$(function(){
  handleResize();

  $(window).resize(function(){
    handleResize();
  });
});

CSS - Make absolute position and make top & bottom value zero.

.box{
    position: absolute;
    top: 0;
    bottom: 0;
}
shanidkv
  • 1,118
  • 1
  • 9
  • 12
0

You need to wrap each box with a parent div with the desired height, like 918px and then set the box height to 100%.

UPDATED FIDDLE

EDIT:

The previous demo is not right. You should also add overflow:auto to the parent div.

See the new demo

U r s u s
  • 6,680
  • 12
  • 50
  • 88