css浮动页脚边距
我正在尝试修改粘性页脚(http://www.cssstickyfooter.com/)以显示边距...对于宽度:90%和边距:自动的左右来说很容易
| | | |
| | | |
| | | |
| | | |
,但是如何将高度达到90%(或显示某种顶部和底部边距)而不弄乱浮动页脚,
| ____ |
| | | |
| |____| |
| |
谢谢
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
#header {
height: 33px;
line-height: 33px;
text-align: center;
background-color: green;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%; background-color:gray; }
#main {
overflow: auto;
padding-bottom: 33px; /* must be same height as the footer */
background-color: red;
height: 100%;
}
#footer {
position: relative;
margin-top: -33px; /* negative value of footer height */
height: 33px;
line-height: 33px;
text-align: center;
background-color:blue;
}
i am trying to modify a sticky footer (http://www.cssstickyfooter.com/) to show a margin... it is easy for right and left with width:90% and margin:auto
| | | |
| | | |
| | | |
| | | |
but how to get the height to 90% (or show some kind of top & bottom margin) without messing up the floating footer
| ____ |
| | | |
| |____| |
| |
thanks
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
#header {
height: 33px;
line-height: 33px;
text-align: center;
background-color: green;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%; background-color:gray; }
#main {
overflow: auto;
padding-bottom: 33px; /* must be same height as the footer */
background-color: red;
height: 100%;
}
#footer {
position: relative;
margin-top: -33px; /* negative value of footer height */
height: 33px;
line-height: 33px;
text-align: center;
background-color:blue;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这适合您的需求吗?
http://jsfiddle.net/CZayc/
would this suit your needs?
http://jsfiddle.net/CZayc/