个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我浏览了所有与“粘性页脚”相关的问题，但没有任何帮助，因为我的#content div 并不总是有足够的内容将页脚推到底部。这是我用来实现此目的的代码，但显然我做错了:
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} <div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->当索引正文有大量文本图像时，我的一些尝试才起作用，然后页脚才走到最后，但是当它没有太多内容时，比如说 2 个段落标签和一个图像，页脚不会粘住。也许仅使用 CSS 是不可能的，因为 index_footer 高度不固定？有没有办法用 JavaScript 做到这一点？或者这样做的正确方法是什么？
我的屏幕分辨率真的很大，可能是 1680 x 1050 的问题
最佳答案
尝试将页脚 div 移到容器 div 之外。你的技术应该会起作用。您在页脚位于包含 div 内但相对定位时设置它的方式。因此，即使包含的 div 可能有 100% 的高度，其中的页脚 div 仍然只是位于容器中内容的正下方。
我的意思的一个简单示例，(请注意，需要一个带有一些 padding-bottom 的额外 div 以确保页脚不会与内容重叠 ),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
如果您无法将页脚移出容器(无论出于何种原因)，那么您也可以尝试将页脚绝对定位在包含 div 的底部。 position:absolute；底部:0px; 等
例如，(同样，需要一个带有一些 padding-bottom 的额外 div 以确保页脚不会与内容重叠)，
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>
关于javascript - 为什么我的粘性页脚不粘？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1980857/
25
4
0
查看此页面:http://jsbin.com/itufix使用 IE(页面自动启用 IE7 模式)。 在这里您将找到如何使用显示 block 呈现内联元素(输入和跨度)的示例。所有元素的边距和填充都设
我有一个自定义的 UITabvleViewCell，其中有一个 UIImageView。当在 cellForRowAtIndexPath 中设置单元格时，我可以很好地设置图像(尽管我没有)，但是在某些
我是一名优秀的程序员,十分优秀！