HTML - Customizing container with background color and ensuring minimum height of 100%

Question

HTML - Customizing container with background color and ensuring minimum height of 100%

After creating a dynamic page using Bootstrap, I managed to add a sticky nav bar and footer.

The navbar, footer, and page content are all in black color.
I want the main content area to be white with black sides matching the background.

Currently, I can only achieve this by setting a specific height instead of using height:100%.

If someone could review my code and help me understand what I'm doing wrong, that would be greatly appreciated.

I suspect that I'm not implementing the 'div push' concept correctly as I see a white push box on the page.

<div id="push"></div>

Check out the desired result image here - when the content exceeds the page size, users should be able to scroll while the footer remains sticky. I believe this functionality is already working.

View my code on JSFiddle here

Access the Bootstrap example of a Sticky Footer with Sticky Nav Code here

html css twitter-bootstrap responsive-design sticky-footer

Answer 1

Answer №1

My recommendation is to take a simpler approach by examining the CSS, specifically focusing on the position:fixed property/value.

If you increase the content or resize your window, you will notice that it scrolls as intended. This concept is a stripped-down version of what I discovered here.

<html>
<head>
<title>Fixed Footer</title>
<style type="text/css">
    body{ margin:0px; padding:0px;background:black}

    #maincontent{
        width:500px;
        background:#fff;
        padding:20px 20px 0px 20px;
        margin:0px auto;
    }

    #footer{
        position:fixed;
        left:0px;
        bottom:0px;
        width:100%;
        background:#990000;
        line-height:30px;
        color:#fff;
    }
    #footer span{padding-left:20px;}
</style>
</head>

<body>
    <div id="maincontent">
    <h1>Fixed Footer Using Only CSS</h1>
    <p>The following script achieves just that, relying solely on CSS.</p>
    <p>The following script achieves just that, relying solely on CSS.</p>
    <p>The following script achieves just that, relying solely on CSS.</p>
    </div>
    <div id="footer"><span>I am the footer that remains fixed at the bottom :-) </span></div>
</body>

</html>

Answer 2

My recommendation is to take a simpler approach by examining the CSS, specifically focusing on the position:fixed property/value.

If you increase the content or resize your window, you will notice that it scrolls as intended. This concept is a stripped-down version of what I discovered here.

<html>
<head>
<title>Fixed Footer</title>
<style type="text/css">
    body{ margin:0px; padding:0px;background:black}

    #maincontent{
        width:500px;
        background:#fff;
        padding:20px 20px 0px 20px;
        margin:0px auto;
    }

    #footer{
        position:fixed;
        left:0px;
        bottom:0px;
        width:100%;
        background:#990000;
        line-height:30px;
        color:#fff;
    }
    #footer span{padding-left:20px;}
</style>
</head>

<body>
    <div id="maincontent">
    <h1>Fixed Footer Using Only CSS</h1>
    <p>The following script achieves just that, relying solely on CSS.</p>
    <p>The following script achieves just that, relying solely on CSS.</p>
    <p>The following script achieves just that, relying solely on CSS.</p>
    </div>
    <div id="footer"><span>I am the footer that remains fixed at the bottom :-) </span></div>
</body>

</html>

Answer 3

Answer №2

In my opinion, placing the push right before the footer is the best approach and there is no need to define a fixed height in the CSS.

http://jsfiddle.net/ugeVP/

Answer 4

In my opinion, placing the push right before the footer is the best approach and there is no need to define a fixed height in the CSS.

http://jsfiddle.net/ugeVP/

HTML - Customizing container with background color and ensuring minimum height of 100%

Answer №1

Answer №2

Similar questions

loop not functioning properly with file type input

Modify the content of a div by clicking on a word or link using Javascript

Limiting zero is ineffective when it comes to pop-up issues

Unable to display the absolute path of the image src in WebStorm

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

a height of 100% with a minimum height of 100%

Moving data from one table to another and making changes or removing it

I am having trouble aligning the element perfectly in the center

Adding a border with vertical padding above and below two floated divs with different heights

Alternative form for non-javascript browsers in the absence of script

Exploring the options: choosing an element from a dropdown menu using a div tag

The implementation of modal pop-ups is resulting in unresponsive touch areas on mobile devices and tablets

Issue with submitting input fields that were dynamically added using jquery

Unable to locate template or render function for Vue Draggable Next component

Refining a JQuery scroll animation using mouseover functionality

Tips for aligning an icon vertically within a span tag

Trouble with HTML img srcset functionality?

White background with a black border and transparency on an Android device

Is it a scope issue if ng-click is not firing and the function is not working properly?

Issue with custom Javascript not executing in Internet Explorer versions 9 and 10