Question

我试图将我的页脚放在页面的底部，但它对我的列的表现很奇怪。由于某种原因，页脚内部的内容也停留在它所应用的位置（大部分时间），但分配给页脚的边框一直延伸到我的大部分容器元素周围而不是仅仅围绕页脚环绕底部。

这是我的容器的css：

#container
{
    height:100%;
    display:block;
    margin: 2% 10%;
    width:80%;
    background-color: white;
    border: 0.2em solid black;
}

这里是页脚的CSS：

footer
{
    text-align: center;
    margin-top: 5%;
    display:block;
    width:100%;
    height:5%;
    background-color: white;
    border: 0.2em solid black;
}

这是我的专栏的CSS

.col {
    float:left;
    width: 46%;
    height:90%;
    padding:0 2% 0 2%;
}

如果有帮助，页脚也在我的HTML中的容器div内。

我是HTML和CSS的初学者，大部分代码都来自我的教授，所以任何帮助都会受到赞赏。谢谢！

Answer 1

Here is a sample将始终使用100％的高度，同时提供将页脚放置到底部的选项，同时有更多内容。

我使用了flex-box布局。

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
body{
  display:flex;
  flex-direction: column;
}
#container
{
    margin: 0 auto;
    width:80%;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
    display:flex;
}
#footer
{
    margin: 0 auto;
    width:100%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
}
.col {
    height:90%;
    flex-shrink:0;
    flex-grow:1;
    margin:0 2% 0 2%;
}

修改1

根据给定的jsFiddle，Here is another sample使用flexbox布局来修复样式。希望它能满足您的需求。

页脚和边框与CSS中的列表现形式奇怪

1 个答案: