Make footer take remianing bottom space using css_问答_开发者

Make footer take remianing bottom space using css

开发者 https://www.devze.com 2023-03-31 12:02 出处：网络

I want my footer to take height same as the remaining bottom space. Currently I\'m using following css for foot开发者_运维知识库er:

相关专题：css footer

I want my footer to take height same as the remaining bottom space. Currently I'm using following css for foot开发者_运维知识库er:

clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;

The result is:

Make footer take remianing bottom space using css

Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?

note:- I don't want to give position:fixed to make it stick to bottom.

Well, the short answer is, You Can't!
The longer answer? You can fake it.

Why can't you?

Because a block level element is not able to strech and fill a space in height.

Fake it how?

Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.

This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the flex-grow: 1 in the footer element instead of the content element (in the article it's listed as flex: 1).

You don't really can make a block-element span to the full height available in CSS. Best way is find use some workaround, which looks alike.

For example you may use a background-color (for the body/wrapper) or a centered background-image positioned to the bottom…

This worked like a charm for me (originally from how-to-keep-footer-at-bottom-of-page-with-css):

Put this in your css:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

Then in your index/master/_layout/whatever:

<body>

    <div id="wrapper">

        <div id="header">
        </div><!-- #header -->

        <div id="content">
        </div><!-- #content -->

        <div id="footer">
        </div><!-- #footer -->

    </div><!-- #wrapper -->

</body>

I had the same type of problem. What worked for me was to add a few pixels of padding to the footer and it ended up taking up the bottom of the page.

This is what did it for me: