个人中心
gpt4 book ai didi

css - 在没有无关标记的情况下，使页脚不会超出屏幕底部

转载 作者：技术小花猫 更新时间：2023-10-29 12:43:26 25 4
gpt4 key购买 nike

如果您只需要担心 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 中工作)，我提出了这个解决方案(它确实需要使用固定高度的标题)。我确实必须使用 float 而不是 display: inline-block 因为我的 Safari 4.0 没有用 min-height 显示它用于此解决方案: 

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

关于css - 在没有无关标记的情况下，使页脚不会超出屏幕底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3150626/

25 4 0
文章推荐： php - 如何在 Linux Ubuntu Wheezy (raspbian) 上为 PHP7 安装 SSH2-Lib？
文章推荐： 安卓证书过期
文章推荐： android - 在 Activity 中强制执行自定义权限并添加为 Intent Filter
文章推荐： c# - 任何基于 WPF 的 Markdown 渲染器？
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com