html – 使页脚不会上升到屏幕的底部,无需额外的标记

如果您只需要担心Firefox和Webkit浏览器,您将使用什么CSS来使页脚在以下 HTML中不会上升到底部或屏幕上方(如果正文内容推送则降低)？注意：我不想在页面中添加任何标记.

<html>
    <body>
        <header>...</header>
        <article>...</article>
        <aside>...</aside>
        <footer>...</footer>
    </body>
</html>

这里有一些复制粘贴html.如何修改css以使其正常工作？

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            p {
                margin-bottom: 10px;
            }

            article {
                display: inline-block;
                height: auto;
                width: 69%;
            }

            aside {
                display: inline-block;
                height: auto;
                width: 30%;
            }

            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> 
        <aside>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
            </ul>
        </aside> 
        <footer>
            <span>Made by me.</span>
        </footer> 
    </body> 
</html>

解决方法

鉴于没有额外的标记的要求,不关心IE(在IE8中工作),我提出了这个解决方案(这需要使用固定的高度标题).我确实不得不使用浮动而不是显示：inline-block,因为我的Safari 4.0没有显示这个解决方案的最小高度：

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            }
        body {
            height: 100%;
            /*below for illustration only*/
            background: yellow;
            }

        #Header {
            position: relative;
            z-index: 1;
            height: 60px;
            margin-bottom: -60px;
            /*below for illustration only*/
            background: red;
            opacity: .8;
            }

        #Article {
            float: left;
            min-height: 100%;
            width: 69.9%;
            vertical-align: top;
            margin-bottom: -30px;               
            /*below for illustration only*/
            background: blue;
        }

        #Aside {
            float: left;
            min-height: 100%;
            width: 30%;
            vertical-align: top;
            margin-bottom: -30px;               
            /*below for illustration only*/
            background: green;
        }

        #Article:before,#Aside:before {
            content: ' ';
            display: block;
            height: 60px;
            width: 100%;
        }

        #Article:after,#Aside:after {
            content: ' ';
            display: block;
            height: 30px;
            width: 100%;
        }

        #Footer {
            position: relative;
            z-index: 1;
            height: 30px;
            margin-top: -30px;
            clear: left;
            /*below for illustration only*/
            background: pink;
            opacity: .8;
        }
    </style>

HTML只是：

<body>
    <div id="Header">Header</div>
    <div id="Article">Article</div>
    <div id="Aside">Aside</div>
    <div id="Footer">Footer</div>
</body>

html – 使页脚不会上升到屏幕的底部,无需额外的标记

解决方法

相关文章