gpt4 book ai didi

html - 如果涉及 元素,则负底边距 "stickey footer"具有烦人的垂直滚动条

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

我得到了一个用“负底边距”技术实现的粘性页脚(不使用 flex 因为需要支持 IE)

它工作正常,直到我有一些像 <h> 这样的元素或 <p>然后在其中呈现一个烦人的垂直滚动条。

我的临时解决方法是使用 <span>相反,但布局会略有不同。这里最好的解决方案是什么?

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

.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -30px;
}

.footer,
.push {
height: 30px;
}
<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
</head>

<body>
<form>
<div class="wrapper">
<h1>I am the header</h1><!--I needs to use span here-->
<div class="push"></div>
</div>
<footer class="footer">
<p>I am the footer</p><!--I needs to use span here-->
</footer>
</form>
</body>

</html>

最佳答案

我用你的代码和修复创建了一个 JSFiddle。这是我添加的内容:

.wrapper {
padding: 1px 0;
box-sizing: border-box;
}
.footer,
.push {
height: 30px;
overflow: hidden;
}

https://jsfiddle.net/97hsqLav/

你有两个主要问题:

  1. 边距问题是由“边距崩溃”引起的。在某些情况下,基本上开始和结束边距与父级相加。设置 1px 的填充可以解决这个问题(将其设置为顶部和底部以确保两种方式)。需要额外的 box-sizing,所以高度保持 100%(而不是 100% + 2px 填充)
  2. 页脚中的文本高于 30 像素,因此页脚本高度了几个像素(因此触发了滚动条)。 Overflow: hidden 通过切断超过 30px 的所有内容来修复此问题

关于html - 如果涉及 <h> 元素,则负底边距 "stickey footer"具有烦人的垂直滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53391014/

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