Html 负底边距“;“粘贴页脚”;如果<;h>;涉及的因素

Html 负底边距“;“粘贴页脚”;如果<;h>;涉及的因素,html,css,sticky-footer,Html,Css,Sticky Footer,我有一个粘性页脚,它是用“负底边距”技术实现的(不使用flex,因为需要支持IE) 它工作得很好,直到我有了一些元素,比如或,然后它用一个恼人的垂直滚动条进行渲染 我的临时解决方法是使用,但布局会明显不同。这里最好的解决方案是什么 html, 身体 形式{ 身高:100%; 保证金:0; } .包装纸{ 最小高度:100%; /*等于页脚的高度*/ /*但也说明了最后一个孩子的潜在利润底部*/ 边缘底部:-30px; } .页脚, .推{ 高度:30px; } 页面标题 我是头球 我是页脚

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

它工作得很好,直到我有了一些元素,比如
,然后它用一个恼人的垂直滚动条进行渲染

我的临时解决方法是使用
,但布局会明显不同。这里最好的解决方案是什么

html,
身体
形式{
身高:100%;
保证金:0;
}
.包装纸{
最小高度:100%;
/*等于页脚的高度*/
/*但也说明了最后一个孩子的潜在利润底部*/
边缘底部:-30px;
}
.页脚,
.推{
高度:30px;
}

页面标题
我是头球
我是页脚


这就是您将页脚高度限制为30像素的问题。如果您输入的文本超过30像素,浏览器将自动滚动显示所有内容。请尝试将页脚高度增加到60像素。

希望这对您有所帮助

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html, body,form {
/*height: 100%;*/
margin: 0;
font-weight:normal;
}
.wrapper {
width:90%;
margin:0 auto;
}
.footer{
position:absolute;
width:90%;
bottom:0;
left:5%;
right:5%;
}
.innerFooter{
display:block;
}
</style>
</head>
<body>
<form>
<div class="wrapper">
<h1>I am the header</span> //I needs to use span here</h1>
<div class="push"></div>
<div>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
</div>
</div>
<footer class="footer">
<div class="innerFooter">
<p>
<span>I am the footer</span>
<span>I needs to use span here</span>
</p> 
</div>

</footer>
</form>
</body>
</html>

页面标题
html、正文、表单{
/*身高:100%*/
保证金:0;
字体大小:正常;
}
.包装纸{
宽度:90%;
保证金:0自动;
}
.页脚{
位置:绝对位置;
宽度:90%;
底部:0;
左:5%;
右:5%;
}
.innerFooter{
显示:块;
}
我是标题//我需要在这里使用span

与流行的观点相反,Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学,距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克(Richard McClintock)从《洛伦·伊普斯姆》(Lorem Ipsum)一段中查找了一个更为晦涩的拉丁语单词,即“Concertetur”,并查阅了古典文学中对该词的引用,发现了该词无可置疑的来源。Lorem Ipsum来自西塞罗于公元前45年所著《德菲尼布斯·博诺勒姆和马洛勒姆》(善与恶的极端)的第1.10.32节和第1.10.33节。这本书是一本关于伦理学理论的论文,在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet..”来自第1.10.32节中的一行。
以下是自1500年代以来使用的Lorem Ipsum的标准块,供感兴趣的人参考。西塞罗的“de Finibus Bonorum et Malorum”中的第1.10.32节和第1.10.33节也以其原始形式复制,并附有H.Rackham 1914年翻译的英文版本。

我是页脚 我需要在这里使用span


我用您的代码和修复程序创建了一个JSFIDLE。以下是我补充的内容:

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

你有两个主要问题:

  • 保证金问题是由“保证金崩溃”造成的。基本上,在某些情况下,起始页边距和结束页边距与父页边距相加。将padding设置为1px可解决此问题(将其设置为top和bottom以确保两种方式)。需要额外的
    盒子尺寸
    ,因此高度保持在100%(而不是100%+2px填充)
  • 页脚中的文本高于30px,因此页脚本身太高了几个像素(从而触发滚动条)<代码>溢出:隐藏通过切断超过30px的所有内容来修复此问题
  • .wrapper {
          padding: 1px 0;
          box-sizing: border-box;
    }
     .footer,
     .push {
          height: 30px;
          overflow: hidden;
     }