2

我有一个 HTML 页面，它分为 4 个部分。

  1. 标题
  2. 菜单
  3. 内容
  4. 页脚

我为每个部分使用 1 个 div，而 1 个 div 包含所有 4 个 div。

我的页眉高度是 50px，菜单高度是 50px，页脚高度是 20px。

然后我尝试将菜单的高度设置为 100%。菜单 div 正在获取在我的页面中创建滚动条的容器的高度。

CSS如下：

html, body {
    margin: 0px;
    height: 100%;
    width: 100%;
    min-width: 1024px;
    min-height: 500px;
}

#container {
    width: 100%;
    height: 100%;
}

#header {
    width: 100%;
    height: 50px;
}

#menu {
    width: 100%;
    height: 50px;
}

#content {
    width: 100%;
    height: 100%;
}

#footer {
    width: 100%;
    height: 20px;
}

是否可以单独使用 CSS，或者我也必须使用 JavaScript？

4

3 回答 3

3

这是另一个纯 CSS 解决方案，无需指定任何高度即可工作。[这个解决方案值得自己回答]

这是一个工作小提琴

为什么好？

因为也许有一天你的页眉会改变，影响他的身高，或者你的菜单会增长，或者你的页脚需要额外的一行导致他的身高增长..

所有这些更改将导致您为更改的元素重新修复另一个高度，并重新计算内容的正确高度。

我的解决方案使它更容易，因为所有部件都是流动的。让他们在页面中占据他们需要的空间，内容总是会占据剩余的高度。

浏览器支持：

测试平台： IE10、Firefox、Chrome、Safari、Opera。（不适用于旧版 IE，未在其他浏览器上测试）

有什么缺点吗？

是的。不幸的是，由于这个技巧的工作方式，您将需要更改 HTML 的排列。

我找到了一种纯 CSS 方法来创建一个div带有两个 child 的容器div。第一个将采用他需要的确切高度，第二个将采用剩余的容器高度。

但是如果我想要相反的情况怎么办，如果我想第二个div占据他的确切空间，第一个div占据容器的剩余高度怎么办？

我没有找到使用纯 CSS 的简单方法。这就是为什么，我实际上颠倒了divs 的顺序，第一个保存第二个数据，第二个保存第一个数据，现在我们让第一个 div 取他的确切高度，第二个拉伸到容器的末尾为我们想要，然后我通过 CSS 旋转它们的视图以使它们按顺序显示。

对于您的情况，这意味着您必须按该顺序创建 HTML。

  1. 标题
  2. 菜单
  3. 页脚
  4. 内容

解决方案：

HTML：

<div class="Container">
    <div class="Header">I'm in the header</div>
    <div class="Menu">I'm in the menu</div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">I'm in the footer</div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper">
                    <div class="Content">
                        I'm in the content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.Inverse, .Inverse > *
{
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.Header
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}
.Menu
{
    /*for demonstration only*/
    background-color: #6ea364;
}
.Content
{
    height: 100%;
    overflow: auto;
    /*for demonstration only*/
    background-color: #90adc1;
}
.Footer
{
    /*for demonstration only*/
    background-color: #b5a8b7;
}
于 2013-09-28T18:51:34.030 回答
2

纯 CSS 解决方案

使用calc() （CSS3）

工作小提琴

HTML：

<div id="container">
    <div id="header">header</div>
    <div id="menu">menu</div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</div>

CSS：

html, body {
    margin: 0px;
    height: 100%;
    /*min-width: 1024px;
    min-height: 500px;*/ /*You can uncomment that back if you want)*/
}
#container {
    height: 100%;
}
#header {
    height: 50px;
}
#menu {
    height: 50px;
}
#content {
    height: calc(100% - 120px); /*120 = 50 + 50 + 20*/
    overflow: auto;
}
#footer {
    height: 20px;
}

注意我删除了你的width:100%，因为这是像 div 这样的块元素的默认行为。

这也可以用纯 CSS完全不用说明任何高度来完成。检查我在该页面中的第二个答案。

于 2013-09-28T17:19:04.610 回答
2

这是一个想法。可能不适用于您的特定问题，但它确实解决了混合像素和百分比的问题。根据问题的当前定义，顶部（页眉、菜单）和底部（页脚）都使用固定高度。但是你想让内容占据其余部分。一种解决方案是在容器的顶部和底部填充顶部和顶部的菜单高度相同，底部的页脚高度相同。那么问题是你有一个 100% 高度的容器加上顶部 100 像素和底部 20 像素。但是有一个 CSS 约定。它被称为box-sizing并且非常兼容跨浏览器（只要包含 -moz）。实际上，它计算 100% 高度后包括填充。因此，100% 的高度加上所有的填充仍然等于 100% 的高度。

在实践中它看起来像这样

HTML

<div class="container">
    <div class="header"></div>
    <div class="menu"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

CSS

html, body, .container {
    min-height: 100%;
    background:#eee;
}

.header {
    height: 50px;
    position: relative;
    z-index: 1;
}

.menu {
    height: 50px;
    position: relative;
    z-index: 1;
}

.footer {
    height: 20px;
    width: 100%; /* needed because this one is position absolute */
    bottom: 0%;
    position:absolute;
}

.content {
    height: 100%;
    width: 100%; /* needed because this one is position absolute */
    top: 0%;
    left: 0%;
    padding-top: 100px;
    padding-bottom: 20px;
    position:absolute;
    box-sizing: border-box; /* here's the kicker */
    -moz-box-sizing: border-box;
    overflow: auto; /* don't panic. they take the place of normal scroll bars*/
}

演示

http://jsfiddle.net/WLR5S

资源

http://jsfiddle.net/WLR5S/show
http://jsfiddle.net/WLR5S/6/show（带有-moz for firefox）

优点

显然，重点是您可以使用 100% 高度的元素和填充来补偿页脚和页眉

缺点

您必须对内容和页脚使用绝对位置，并且必须将相对位置与 z-index 应用到页眉区域

编辑

经过更多的实验，我发现最好使用 height 而不是 min-height 和 applyoverflow:auto等。这样，如果内容太大，页面就会有适当的侧边栏：http: //jsfiddle.net/WLR5S/2/或http://jsfiddle.net/WLR5S/3/

于 2013-09-28T16:25:38.117 回答