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

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.