gpt4 book ai didi

css - 粘性页脚和 IE

转载 作者:行者123 更新时间:2023-11-28 09:08:26 26 4
gpt4 key购买 nike

我遇到一个问题,当我包含一个 float 元素时,我的粘性页脚不会粘在底部,它会位于非 float 内容的末尾。

我的目标是如果页面内容没有填满整个页面,则将 FOOTER 放在页面窗口的底部,当内容溢出单个页面高度时,将 FOOTER 放在页面 CONTENT 的底部。

这是我的代码:


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sticky.css"/>
<title>Sticky Footer Test</title>
</head>

<body>

<nav>
<div id="wrap">
<p class="navbargreen">Green Navigation Bar</p>
</div>
</nav>

<main>
<div id="wrap">
<p class="redtext">Lorem ipsum</p>
<div id="box1">Floater 1</div>
</div>
</main>

<footer>footer</footer>

</body>

</html>

Here is my CSS:

html {
position: relative;
min-height: 100%;
}

body {
margin: 0 0 100px; /* bottom = footer height */
}

main {
position: relative;
min-height: 100%;
}

#wrap {
margin: 0 auto;
width: 960px;
height: auto;
min-height: 100%;
padding: 0;
background-color: yellow;
}

.navbargreen {
height: 30px;
width: 960px;
background-color: greenyellow;
}

.redtext {
background-color: red;
height: 3000px;
}

#box1 {
float: left;
height: 400px;
width: 300px;
background-color: orange;
}

footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: purple;
}

这让我抓狂!

我已经用谷歌搜索了这个模型测试页并进行了大量实验,但让我失望的是我无法解决它:-(

我知道它与 float 有关,但我无法解决这个问题!

最佳答案

fiddle

http://jsfiddle.net/czgoxafr/27/

* {
margin: 0;
}
html, body {
height: 100%;
}

.wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -70px;
}
.wrap:after {
content: "";
display: block;
}
.site-footer, .wrap:after {
height: 70px;
}
.site-footer {
background: orange;
}

关于css - 粘性页脚和 IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26597608/

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