Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Footer Needs To Stick To Bottom When Content Is Less

Post a Comment
I have an aspx page in which I have less content, due to that my 'footer' is not sticking to bottom. Please find html code for this
Copy 
<footer>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</footer>

Try this change the position as fixed


Solution 2: 

.footer {
    position:absolute;
    left:0;
    bottom:0;
    height:17px;
    width:100%;
    background-color:black;
}

As long as html is position:relative, this works. No need for wrappers or anything like that :)


Solution 3: 

<!doctype html>
<html lang="en">
<head>
    <style>
        html,body{
            height: 100%;
            margin: 0px;
        }
        #container{
            min-height: 90%;
            background-color: #f00;
        }
        #footer{
            min-height: 10%;
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div id="container">
        it's the container
    </div>
    <div id="footer">
        it's the footer
    </div>
</body>
</html>

Post a Comment for "Footer Needs To Stick To Bottom When Content Is Less"