9

我被这个问题困住了：

我有一个包含两个 div 的 div (#container)。容器的高度应该是精确的 100%，不管这个 div 的内容是什么 - 不多不少。

在这个 div 中，我想要两个全角 div 彼此重叠：

  • (#upper) div 的内容自动确定其高度。
  • (#lower) div 的内容应该是可滚动的，但只能垂直滚动。它的高度取决于 (#upper) 的高度：100% - (#upper)height = (#lower)height

目前我有以下CSS ...

body {
    margin:0;
    padding:0;
    }
#container 
    {
    position: relative;
    width: 500px;
    height: 100%;
    max-height: 100%;
    background-color: #f00;
    }
#upper { 
    width: 100%;
    background-color: #0f0;
    }
#lower {
    width: 100%;
    background-color: #00f;
    overflow: auto;
}

...以及此代码：

<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>

(#container) 的高度怎么能正好是 100% - 与它的内容无关？现在高度变大是因为（#upper）和（#lower）的组合内容？

(#lower) 怎么可以滚动（只能上下滚动，不能从左到右！）？

非常感谢您的反馈，希望我们都能从中吸取教训。

4

4 回答 4

4

您应该将您的html和body元素设置为 100% 的高度，以便您的子 div 知道该百分比的基础。像这样：

html, body {
    height:100%;
    width:100%;
}

将您的容器更改为：

#container 
{
    width: 500px;
    height: 100%;
    background-color: #f00;
}

至于你的滚动问题，你几乎就在那里。将代码更改为以下内容：

#lower {
    width: 100%;
    height:100px;
    background-color: #00f;
    overflow-y: auto;
}

为了让它工作得最好，在你的下 div 上设置一个固定的高度，这将使可滚动动作很容易工作得最好。

编辑：

我意识到我误读了你的问题。你想让你的下 div 填充窗口的剩余高度。这是在 jquery 中执行此操作的方法：

var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top); 
$('#lower').height(remaining_height);

我还没有找到只用 CSS 来做到这一点的方法......遗憾的是。

于 2013-08-18T20:21:29.760 回答
3

我认为这可能会对您有所帮助：

<head>
    <title></title>
    <style>
        .upper{
            height:50px;
            border: 1px solid groove;
        }
        .lower{
            height:calc(100% - 50px);
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div style="height:500px; border:1px solid red; position:relative;">
        <div class="upper"></div>
        <div class="lower"></div>
    </div>
</body>

这将从下 div 中取出 50px

于 2015-10-21T17:03:25.660 回答
1

对于纯 CSS 解决方案，请使用 display: table-row。

<style>
*{
    box-sizing: border-box;
    margin:0;padding:0;
}
  html, body, #container{
    height: 100%;
}

#container{
    display: table;
    height: 100%;
}

#upper, #lower{
    display: table-row;
}

#upper{
    height: 100px;
}
</style>

<div id="container">
    <div id="upper">bla</div>
    <div id="lower">bla</div>
</div>

此解决方案仅在内容高度不超过 100% 时才有效，请参见此处：https ://stackoverflow.com/a/13668087/603569

于 2015-06-09T14:28:47.690 回答
0

这是一个 100% 的 css 替代方案：

<div style="height:100%;">
    main div

    <div style="height:100%;padding-bottom:200px;">
    header div
    </div>

    <div style="position:relative;height:200px;top:-200px;">
    footer div
    </div>

</div>

请记住，所有父元素，包括 body 和 html，也必须设置它们的高度。

于 2014-01-24T02:28:57.257 回答