CSS: Div to auto-fit at the bottom of the page for all screen sizes

Basically I have something like this at the moment: -

enter image description here

The black rectangle is a div element that I would like to expand to the bottom of the page so it is at the bottom no matter what screen resolution you are using. The black background of the div will be replaced with the image (so if possible, I don't want the image to distort.)

At the moment I have the code: -

Html

<div id="main-container" class="container">

    <img style="width: 100%; height: 100%;" src="http://url.com/test.jpg" alt="" class="alignnone size-full wp-image-37" />

</div>

      

CSS

#main-container {
    height: 100%; 
    background-color: #000;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

      

And then I use bootstrap which contains all the CSS for the maximum width.

.container {
    width: 1170px;
}

      

At the moment, the image is going to the bottom of the page, but I want to contain it at the bottom of the browser. What would be the best way to achieve this?

+3


source to share


1 answer


You cannot do this with CSS. You need to use Javascript to dynamically change the CSS for what it detects. I am using something like this:

function setSizes() {
    "use strict";
    var height = ($(window).height() - $("#top").height()) - 5,
        fancytree_padding_text = $(".fancytree-container").css("padding-top"),
        get_padding = new RegExp("(.*?)(px)"),
        fancytree_padding = parseInt(get_padding.exec(fancytree_padding_text)[0], 10);
    $(".fancytree-container").css("max-height", (height - (fancytree_padding * 2) - 5) + "px");
    $(".feeds").css("max-height", height + "px");
    $(".details").css("max-height", height + "px");
    $(".bottomPadding").css("padding-top", (height - ($(".bottomPadding p").height() + 55)) + "px");
setFeedWidths();
}

      



I also add some code to listen for the resize and call this when the document is loaded:

$(function () {
    "use strict";
    setSizes();
    $(window).resize(function () {
        setSizes();
    });
}

      

-1


source







All Articles