Make footer take remianing bottom space using css

I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:

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:

enter image description here

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.

标签： css footer

5条回答

该账号已被封号

2楼-- · 2019-04-20 00:24

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:

footer{
    padding-bottom:10px;
}

0人赞添加讨论(0) 举报

We Are One

3楼-- · 2019-04-20 00:32

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>

0人赞添加讨论(0) 举报

甜甜的少女心

4楼-- · 2019-04-20 00:41

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.

0人赞添加讨论(0) 举报

叼着烟拽天下

5楼-- · 2019-04-20 00:50

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).

0人赞添加讨论(0) 举报

戒情不戒烟

6楼-- · 2019-04-20 00:51

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…

0人赞添加讨论(0) 举报