How to fit content on remaining height

i need to create a responsive website which will fit content inside a browser height and should not display a vertical scroll. I need to place header at the top of the page and footer at the bottom, and i need to place content in the remaining height. Inside a content i had an image which must fit in that content and must not scale. Is there any solution to do that, or i need to calculate header height and then header footer and to subtract with window height. Thank you :)

var content = $(window).height() - $('.header').height() - $('.footer').height();

Answers


Js:

function _responsive( )
{
    var content = $(window).height() - $('.header').height() - $('.footer').height();
    $('.content').css('height' , content);
}
$(window).resize(function()
{
    _responsive();
});
_responsive();

HTML:

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

CSS:

.content {
    overflow-x:hidden; overflow-y:auto;
}

If you have a fixed header a footer, try something like this. I'm not sure if this is any more practical than just using javascript, but here goes

html..

<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</body>

css...

body {
    overflow:hidden;
}
#header {
    background-color:blue;
    height:100px;
    width:100%;
    position:absolute;
    top:0%;
    z-index:1;
}
#content {
    background-color:red;
    height:100%;
    position:relative;
    z-index:0;
}
#footer {
    background-color:green;
    height:100px;
    width:100%;
    vertical-align:bottom;
    position:relative;
    top:-100px;
    z-index:1;
}

set the top of the footer to the negative height of the footer.


EDIT: Since you have fixed height for the header and footer you can do this:

var _UI = function() {
            var w = $(window).height();
            var h = 100; //height of your header
            var f = 300; //height of your footer
            $('#content-div').css({'height': (w - (h - f)) + 'px'});
        };

after creating this func that will store the right height size you just need to call it on window.resize and doc.ready

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

        $(document).ready(function() {
            _UI();
        });

Need Your Help

updating or retieving a date time on mysql to be w3c date and Time format

php mysql datetime w3c

Okay So I have table content that has a update_time column which is mysql DATETIME column format. So an example time looks like this 2014-01-25 08:03:17 now this has been working okay , But I am

Is it safe to verify the RPM that has just been installed from a %posttrans?

rpm rpm-spec

I know this is non-standard, but it's intended to overcome a short term problem with a proprietary distribution. Because there are dependencies that are unique to our deployment systems, we have to