Question

我试图用页眉和页脚创建圆角。我能够强迫标题位于顶部，但我不明白为什么我不能强迫页脚位于底部。

事实上，绝对的位置;底部：0;这样做，但我的页脚只在文本的长度。当我添加宽度：100％;，页脚变大，然后???

在这里，您可以看到我的代码：http://jsfiddle.net/fleduc/GN9q5/

Answer 1

您设置了left: 0和right: 0，而不是width: 100%; - 请参阅test http://jsfiddle.net/thebabydino/GN9q5/3/

您可能还想阅读此http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

确实，你在这里有绝对定位，width: auto在这种情况下不会做到这一点，但你必须明白width: 100%表示容器的宽度没有填充和边框（除非您使用box-sizing: border-box）

Answer 2

绝对定位的元素不再是布局的一部分。他们不知道父元素有多大，所以你必须将宽度设置为静态值。

Answer 3

您必须使用绝对值设置width并计算填充。

例如：

If you have a width of 960px and a padding of "5px", your with must be 950px.

You SHOULD remove it for reason that I don't exactly know.

Answer 4

/*footer*/
.rcs .ftr {                        
    margin:0; 
    font-size:1.2em; 
    padding:5px 5px 5px 10px;
    position: absolute; 
    bottom: 0px;
    width: 385px;          
  border-bottom-left-radius: 0.35em;
  border-bottom-right-radius: 0.35em;
    border-top:1px solid #AAAAAA;
}

您将容器宽度设置为400px。左和右右边填充= 15px，所以减去它并将宽度设置为385px。

更多信息：absolute vs relative position width & height

另外，请务必关闭所有声明。

Answer 5

你已经用px指定了div的宽度，所以你能用px指定页脚的宽度吗？示例：http://jsfiddle.net/GN9q5/4/

Answer 6

只改变这个css，它会起作用;-)

.rcs .ftr {                        
        margin:110px 0 0 0; 
        font-size:1.2em; 
        padding:5px 0px 5px 10px;        
        border-bottom-left-radius: 0.35em;
        border-bottom-right-radius: 0.35em;
        border-top:1px solid #AAAAAA;
    }

参见测试http://jsfiddle.net/GN9q5/5/

CSS圆角div，页脚放置位置用“绝对”

6 个答案: