Webpage min-height on different resolutions

I got into little problem. I want to create my website to be atlest full height of user's vertical resolution. This is my html:

<div id="head"></div>
<div id="body"></div>
<div id="legs"></div>

And this is my CSS:

html {
    margin: 0;
    padding: 0;
}
#head {
    width: 100%;
    height: 65px;
    background-color: gold;
}
#body {
    width: 80%;
    height: 400px; /* This needs to be defined as remaining height */
    background-color: blue;
    margin: 0 auto;
}
#legs {
    width: 100%;
    height: 20px;
    background-color: gold;
}

And here is jsfiddle http://jsfiddle.net/QgfJ3/embedded/result/ . As you can see #head is 65px high and #legs is 20px high. The problem is that I want to expand #body's high depending on user's resolution. For example if user has 800x600, it means that it used #head's 65px and #legs's 20px, that makes 85px total. There is still 715px remaining, so how to set this height to #body?

Answers


You have to use javascript or calc (http://caniuse.com/calc)

jQuery method:

$(window).on('resize', function() {
    $('#body').height($(window).height() - $('#head').height() - $('#legs').height());
});

Javascript (not sure if works with IE):

window.addEventListener('resize', function() {
    document.querySelector('#body').style.height = window.innerHeight - 85 + 'px';
}, false);

calc:

#body {
    height: calc(100% - 85px);
}

Need Your Help

How to write audio file locally recorded from microphone using AudioBuffer in iPhone?

ios iphone audio audiobuffer

I am new to Audio framework, anyone help me to write the audio file which is playing by capturing from microphone?

Is it possible to detect 32 bit vs 64 bit in a bash script?

bash

I am writing a bash script to deal with some installations in an automated way... I have the possibility of getting one such program in 32 or 64 bit binary... is it possible to detect the machine