如何在正文和页脚之间获得固定边距

我是 CSS 的新手，正在尝试设置一个页面，以便 在页面的主要内容（侧边栏/部分）和页脚（例如 120px）之间始终有一个固定的边距/空间， 这应该跨浏览器工作。

此外，如果页面上的内容非常少，则 页脚应始终至少出现在（可见）屏幕的底部。

我通过应用类 footer 进行了多次尝试，包括以下内容，但总是忽略边距。

 .footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom
}
.footer:before {
    clear: both;
    display: block;
    height: 120px;
    min-height: 120px;
}

 <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- ... -->
    </head>
    <body>
        <nav>
            <!-- ... -->
        </nav>
        <section id="sidebar">
            <!-- ... -->
        </section>
        <section id="main">
            <!-- ... -->
        </section>
        <footer class="footer">
            <div>Some text</div>
        </footer>
    </body>
</html>

有人可以帮我弄这个吗？

此外，如果关于我的 HTML 有任何更改，请也让我知道。

原文由 keewee279 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 271

html, body { height: 100%; } body { margin:0px; padding: 0px; } .wrap { height: auto; margin: 0 auto -80px; /* footer height + space */ min-height: 100%; padding: 0 0 80px; /* footer height + space */ box-sizing: border-box; overflow: auto; } .footer { background-color: #111111; color: #eeeeee; border-top: 1px solid red; height: 60px; /* footer height */ padding-top: 20px; display: block; margin-top: 20px; /* space between content and footer */ box-sizing: border-box; position: relative; width: 100%; }

<body> <div class="wrap"> <nav>  </nav> <section id="sidebar">  </section> <section id="main">  </section> </div> <footer class="footer"> <div>Some text</div> </footer> </body>

html, body { margin:0; padding:0; height:100%; } #wrapper{ /*create a div around whole html body min-height:100%; position:relative; } #main{ padding-bottom:100px; /* Height of the footer element */ } #footer { width:100%; height:100px; position:absolute; bottom:0; left:0; color: #333; }

如何在正文和页脚之间获得固定边距

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译