Question

我是DIV布局的新手并使用CSS，所以如果我对我要问的内容没有意义，请原谅我。

问题
我有一个页面，如果一切都是空白页面正确呈现我的div填满了屏幕。当我测试内容大于内容区域的情况时，内容div没有随内容扩展高度。我已经为此工作了几个小时，但似乎无法让它工作。下面是我的CSS Sheet的样子。我们将非常感谢您提供的任何指导。

理想修复
标题部分始终位于顶部100px，SubMenu部分始终位于标题下50px，页脚始终位于页面底部50px，内容部分始终位于SubMenu和页脚部分之间。如果内容未填充页面，则内容部分填充页面的其余部分，因此页脚位于底部，如果内容大于页面，则内容部分将页脚向下推到屏幕以填充所有内容。（希望有意义）

我的网页上有以下div。

Div 1 - container
Div 2 - Header
Div 3 - SubMenu
Div 4 - Content
Div 5 - Footer

CSS表格

body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #7EB5D6;
}

.container {
    width: 700px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    position: relative;
    overflow: auto;
}

.Header {
    width: 100%;
    height: 100px;
    background-color: lightpink;
    position: relative;
}

.SubMenu {
    width: 100%;
    height: 50px;
    background-color: darkgray;
    position: relative;
}

.Content {
    width: 100%;
    height: calc(100% - 200px);
    background-color: wheat;
    position: relative;
}

.Footer {
    width: 100%;
    height: 50px;
    background-color: black;
    position: inherit;
    bottom: 0;
}

Answer 1

将内容高度设置为auto，以便根据内容自动调整。

Answer 2

使用clearfix方法！它就像一个魅力！

将此添加到您的css某处：

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

然后将clearfix作为第二个类添加到所有适当的div！

CSS布局问题 - Div不随内容扩展

2 个答案: