个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我试图让页脚留在页面底部，即使内容太短。我不想要固定的页脚。我想要一个粘性页脚。
我有一个部分导致了问题。我只希望该部分填充页脚的空间，除非有必要，否则不要有滚动条。
http://fabricatorsunlimited.com/test/quartzcare.html
这是我正在处理的页面，因为没有内容。是不是可以看到，即使没有内容也要滚动查看滚动条。
HTML
<head>
</HEAD>
<body class="size-960">
<section>
<!-- HEADER -->
<header>
</header>
<!-- HOME PAGE BLOCK -->
<div class="line">
<div class="margin"></div></div>
<!-- ASIDE NAV AND CONTENT -->
<div class="line">
<div class="box margin-bottom">
<div class="margin">
<!-- CONTENT -->
<article class="s-12 l-8">
<h1>Quartz Care</h1>
<p>....</p>
</div></article></div></div>
</section>
<!-- FOOTER -->
<footer>
</footer>
</body>
</html>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;}
html {height: 100%;
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}
body {
font-family: "Open Sans";
color: #413D3D;
background: url("bodyback.png");
position: relative;
min-height: 100%;}
.box {
background: #ffffff;
padding: 1.25em;
margin-top: 20px;
border-top: 1px #0068B3 solid;
background-color:#ffffff;
min-height: 100%;}
section {
min-height: 100%;
padding-bottom: -85px;}
footer {
background: #959595;
position: absolute;
right: 0;
bottom: 0;
left: 0;
color: #ffffff;
height: 85px;}
最佳答案
有两个问题。首先是您的 header 和 section 占用的空间比您在 section 中调整的空间多。其次，在调整页脚高度时，您应该使用 margin-bottom 而不是 padding-bottom(不支持负填充)。
所以您需要做的是将页眉和主要部分放在一个公共(public)包装器元素中。该包装元素应该使用以下“技巧”调整页脚高度:
min-height: 100%;
margin-bottom: -85px;
像这样:
<html>
<body>
<div class="wrapper">
<header></header>
<section></section>
</div>
<footer></footer>
</body>
</html>
使用这种样式:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
background: red;
min-height: 100%;
margin-bottom: -85px;
}
.wrapper:after {
content: "";
display: block;
}
footer {
background: blue;
height: 85px;
}
这是一个显示它的 fiddle :https://jsfiddle.net/63fo4tq4/
关于html - 部分不适用于 CSS Sticky Footer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35852429/
24
4
0
鉴于下面的基本 HTML 结构(我无法更改)，我知道我可以使用此 CSS 扩展主要内容 div: html, body { height: 100%; } body { display: fl
这应该类似于 iOS tableview 页脚，也可以在各种网站中看到(粘性页脚)。 我想实现以下目标: A 是具有可变行数的 RecyclerView。 当 A 小于屏幕(或父级)尺寸时，B(页脚)
我有一个 Bootstrap 面板，底部有两个按钮: {{ Form::open( array('route' => array('dogs.edit', $dog->id)
我是一名优秀的程序员,十分优秀！