CSS浮动页脚边距

我试图修改一个棘手的页脚（http://www.cssstickyfooter.com/）表现出保证金...很容易对左右宽度为：90％和保证金：汽车CSS浮动页脚边距

| | | | 
| | | | 
| | | | 
| | | |

但如何获得高度的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; 
}

http://jsfiddle.net/56REF/

来源

2010-08-08 Rakka Rage

html {height：90％;利润率：5％;利润率下限：5％; }不起作用！？顶部是罚款，但底部延伸错了 – 2010-08-08 18:52:07

http://jsfiddle.net/F9HBc/为什么这么难以垂直集中_stretching_ div？它处理horozontal调整大小罚款（无论我是愚蠢的，给定...或css是） – 2010-08-09 14:32:20

http://www.jsfiddle.net/CrdEy/基于http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm 仍然无法正常工作 – 2010-08-09 14:32:59

这会满足您的需求吗？ http://jsfiddle.net/CZayc/

来源

2010-08-09 14:38:15

多数民众赞成在...非常感谢。它在使用圆角时使用边框作为填充时会遇到一些问题（http://jsfiddle.net/Lce3m/）是否无法使用边框或主体的填充来推送HTML或页眉边距或填充以推送对身体？我试图将白色边框移动到正文，但不工作...（http://jsfiddle.net/CZayc/4/）感谢您的帮助 – 2010-08-09 19:10:01

嗯，我用边界消除了第一个元素顶部的边距问题。你可以很容易地使用保证金，没有问题。你可以尝试添加一个额外的元素来像这样移动标题：http://jsfiddle.net/4gKhr/ – 2010-08-10 06:38:37

CSS浮动页脚边距

回答

相关问题