使用 css 让页脚占据底部空间

发布于 2024-12-01 22:22:31 字数 508 浏览 2 评论 0原文

我希望我的页脚高度与剩余底部空间相同。目前我正在使用以下 css 作为页脚：

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;

结果是：

在此处输入图像描述

这里你可以看到黑色有仅取最小高度。我希望它占据[标有问号]之后的整个剩余空间。我必须做出哪些改变才能得到这个？

注意：- 我不想给出 position:fixed 使其粘在底部。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青衫负雪 2024-12-08 22:22:31

嗯，简短的回答是，你不能！
更长的答案？你可以假装它。

为什么你不能？

因为块级元素无法拉伸和填充高度空间。

怎么造假呢？

使用与容器页脚相同的背景颜色（或相同的背景图像），这将导致它看起来它总是填满整个空间。

回复收藏 0 原文

葬﹪忆之殇 2024-12-08 22:22:31

现在可以通过 Flexbox 使用类似于此处描述的方法 https ://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/。执行此操作，但将 flex-grow: 1 放在页脚元素而不是内容元素中（在文章中将其列为 flex: 1）。

回复收藏 0 原文

花开雨落又逢春i 2024-12-08 22:22:31

您实际上无法将块元素跨度设置为 CSS 中可用的完整高度。最好的方法是找到使用一些看起来相似的解决方法。

例如，您可以使用背景颜色（用于主体/包装）或位于底部的居中背景图像......

回复收藏 0 原文

笑脸一如从前 2024-12-08 22:22:31

这对我来说就像一个魅力（最初来自 how-to-keep-footer-at-bottom-of-page-with-css)：

将其放入您的 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;
}

然后放入您的 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>

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