0

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

问题
我有一个页面，如果所有内容都是空白的，则页面会正确呈现，而我的 div 会填满屏幕。当我测试内容大于内容区域的情况时，内容 div 的高度没有随内容扩展。我已经为此工作了几个小时，但似乎无法让它发挥作用。下面是我的 CSS 表的样子。您可以提供的任何指导将不胜感激。

Ideal Fix
Header 部分始终位于顶部 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;
}
4

2 回答 2

1

把你的内容高度：自动，以便它可以根据内容自动调整。

于 2013-05-08T15:36:46.717 回答
0

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

将此添加到您的 css 某处：

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

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

于 2013-05-08T15:41:40.743 回答