gpt4 book ai didi

html - 页脚不在底部

转载 作者:行者123 更新时间:2023-11-28 01:30:20 25 4
gpt4 key购买 nike

这似乎是有史以来最令人困惑的问题,至少对我而言。知道这个页面,除了标题之外是坏的 - 我已经复制了 HTML 并试图小心地删除 WordPress 相关的爵士乐所以你得到页面的 html。

JsBin Live Page

我希望您关注位于页面中间的页脚。我删除了 position:absolute 并且它有点向下移动......它需要留在页面底部。

is position:fixed这是它留在底部的唯一方法,但是看看页脚是如何跟随你的? 我不想要那个

您可能会说,执行 min-height: 100% 这也不是我想要的,因为这样高度为 100% 的容器、行和列类将不起作用。

我想要完成的是:this type of layout.但是正如您所见,页脚向上移动...

是的,我也尝试过 position:relative: check out position:Relative

所以你可以看到我也链接了你的实时页面,从我在互联网上读到的所有内容来看,这是实现 this type of layout. 的正确方法。 ,我怎么一定做错了什么......

更新1

在您建议我缺少 div 之前,我已经通过 div 检查器验证了我的所有示例,并且 div 是正确的。我没有遗漏任何 div。这是一个纯 css 问题

在您将其标记为 x、y 和 z 的副本之前 - 我已经提供了三个我尝试过的位置示例,但都没有奏效:

最后,如包装(或任何其他元素)上所述,min-height: 100% 不能作为答案接受,除非您可以指定我如何实现 this type of layout.

最佳答案

我通常这样做的方式是添加 position: relative 到 html 和 position: absolute 到页脚本身。

主要缺点是必须为正文设置 margin-bottom=footer-height

<!doctype html>
<html>
<head>
<style>
html {
position: relative;
min-height: 100%;
}

body {
margin-bottom: 100px; // is equal to footer height
}

.footer {
position: absolute;
bottom: 0;
left: 0;

width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>

<body>
<div class="footer">footer</div>
</body>
</html>

查看结果https://jsfiddle.net/jy0gsgm4/

关于html - 页脚不在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30485839/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com