CSS圆角div，带有“绝对”的页脚放置位置答案

【问题标题】：CSS rounded corners div, footer placement position with "absolute"CSS圆角div，带有“绝对”的页脚放置位置
【发布时间】：2012-06-01 05:27:23
【问题描述】：

我正在尝试创建带有页眉和页脚的圆角。我能够强制页眉位于顶部，但我不明白为什么我不能强制页脚位于底部。

其实位置是绝对的；底部：0；这样做，但我的页脚仅在文本的长度中。当我添加 width:100%; 时，页脚变得比 ???

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

【问题讨论】：

标签： css html position width absolute

【解决方案1】：

您设置了left: 0 和right: 0，而不是width: 100%; - 参见测试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）

【讨论】：

【解决方案2】：

你已经指定了 div 的宽度，单位是 px，那么你可以指定页脚的宽度，单位为 px 吗？示例：http://jsfiddle.net/GN9q5/4/

【讨论】：

忽略我的回答，安娜得到了最好的解决方案。

【解决方案3】：

只需更改此 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/

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您必须将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.

【讨论】：

【解决方案6】：

/*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;
}

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

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

【讨论】：