Making a footer not rise above the bottom of the screen without extraneous markup

后端未结

关注

 10  970

If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML not rise above the bottom or the screen (and go lower

相关标签:

10条回答

滥情空心

2021-02-01 09:45

* { display:block; }

You are going to have to change the display to inline in your wrapper after that though.

0 讨论(0)
发布评论:

提交评论
- 加载中...

佛祖请我去吃肉

2021-02-01 09:48

Working and tested on:
Google Chrome
Safari
Opera
Internet Explorer
Firefox

EDITED CODE (added overflow:auto; to #aside and #Article to fix the overflow)

<!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          html,body{height:100%;width:100%;margin:0;padding:0;background-color:red;}
          #Header,#Article,#Aside,#Footer{position:absolute;}
          #Header{top:0;left:0;width:100%;height:60px;background-color:blue;}
          #Article,#Aside{top:60px;overflow:auto;bottom:30px;}
          #Article{left:0;width:70%;background-color:green;}
          #Aside{right:0;width:30%;background-color:yellow;}
          #Footer{bottom:0;left:0;width:100%;height:30px;background-color:pink;}
        </style>
      </head>
      <body>
        <div id="Header">Header</div>
        <div id="Article">Article</div>
        <div id="Aside">Aside</div>
        <div id="Footer">Footer</div>
      </body>
    </html>

PS: Background colors are illustrative, thus the css can me more compact by avoiding repeated attributes!

0 讨论(0)

抹茶落季

2021-02-01 09:49

Another answer for those who only need to target the latest versions of browsers utilizing flexbox and viewport units.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }

            header {
                height: 60px;
            }

            article {
                flex: 1;
            }

            footer {
                height: 30px;
            }
        </style>
    </head>
    <body> 
        <header>
            <h1>Lorem Ipsum</h1>
        </header> 
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
            <p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
            <p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
        </article> 
        <footer>
            <span>Made by me.</span>
        </footer> 
    </body> 
</html>

0 讨论(0)

旧时难觅i

2021-02-01 09:50

I think I figured this out:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">
<style type="text/css">
    html {
        background-color: orange;
        height: 100%;
    }

    body {
        background-color: yellow;
        height: auto;
        min-height: 100%;
        position: relative;
    }

    ul {
        list-style: none;
    }

    p {
        margin-bottom: 10px;
    }

    header {
        background-color: red;
        display: block;
    }

    article {
        background-color: blue;
        display: inline-block;
        margin-bottom: 30px;
        vertical-align: top;
        width: 70%;
    }

    aside {
        background-color: green;
        display: inline-block;
        margin-bottom: 30px;
        vertical-align: top;
        width: 30%;
    }

    footer {
        background-color: pink;
        bottom: 0;
        height: 30px;
        left: 0;
        position: absolute;
        width: 100%;
    }
</style>

0 讨论(0)

上一页 1 2