中间div取顶部div和绝对定位底部div之间的剩余高度[重复]
我有这样的结构，我在一个div（包装器）里面包装三个div（顶部，中部，底部）：
css prettyprint-override">#wrapper {
width: 60%;
height: 200px;
border: 2px solid red;
margin: 0 auto;
position: relative;
}
#top {
height: 50px;
background: green;
}
#middle {
background: orange;
overflow: auto;
}
#bottom {
background: blue;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 10px 0;
}
<html>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="middle">
<ul>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
</ul>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>正如您所看到的，包装器div有一个固定的高度，底部div相对于包装器div是绝对定位的。中间div有一个内容列表，我想要实现的是，使中间的div只占据顶部div和底部div之间的剩余高度，并且仍然能够滚动。我怎样才能做到这一点？
共有3个答案
只需将overflow:hidden赋给包装器即可。隐藏从容器/包装器div溢出的任何内容。
或溢出：滚动；如果您想访问隐藏的内容（但这会在某些区域添加一个讨厌的滚动条）。
#wrapper {
width: 60%;
height: 200px;
border: 2px solid red;
margin: 0 auto;
position: relative;
overflow:hidden;
}
#top {
height: 50px;
background: green;
}
#middle {
background: orange;
overflow: auto;
}
#bottom {
background: blue;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 10px 0;
}<html>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="middle">
<ul>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
</ul>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>
您可以使用css执行以下操作：
#wrapper {
width: 60%;
height: 200px;
border: 2px solid red;
margin: 0 auto;
position: relative;
}
#top {
height: 25%;
background: green;
}
#middle {
background: orange;
overflow:scroll;
height:50%;
}
#bottom {
background: blue;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 10px 0;
height:15%
}
这里是jsfiddle。如果您的内容太大而无法容纳，这将允许您滚动。我添加了一些额外的高度参数，但您可以更改它们来满足您的特定需求。重要的是将溢出设置为scroll，以便如果有额外的内容，DOM将滚动，以便您可以看到所有内容。
最简单的方法是使用flex：（实际上似乎是一个副本）
#wrapper {
width: 60%;
height: 200px;
border: 2px solid red;
margin: 0 auto;
display: flex;
flex-flow: column;
}
#top {
height: 50px;
background: green;
}
#middle {
flex: 1;
background: orange;
overflow: auto;
}
#bottom {
background: blue;
padding: 10px 0;
}<html>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="middle">
<ul>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
<li>Some content</li>
</ul>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>-
正如您可以在下面的CSS中看到的，我希望将自己定位在之前。这是因为我目前正在开发的网站也应该在移动设备上工作，其中应该在底部，因为它包含我想要在移动设备上的内容下面的导航。-为什么不是2个主页？这是整个超文本标记语言中唯一被重新定位的两个，所以这一微小变化的两个主页是一个过度。 超文本标记语言： CSS: 具有动态高度，因为不同的子网站可能有更多或更少的导航项。 我知道绝对定位元素从流中移除，因此
-
问题内容： 如您在下面的CSS中所看到的，我想将自己定位在之前。这是因为我当前正在开发的网站也可以在移动设备上工作，该网站应该位于底部，因为它包含了我想要在移动设备内容下方显示的导航。-为什么没有2个母版页？这是在整个HTML中重新定位的仅有2个，因此，此较小更改的2个母版页是一个过大的功能。 HTML： CSS： 具有动态高度，因为不同的子站点可能具有更多或更少的导航项。 我知道绝对定位元素已从
-
问题内容： 我正在一个Web应用程序上工作，我希望其中的内容能填满整个屏幕的高度。 该页面具有标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。 我有一个标题和一个内容。目前，我正在使用表格进行布局，如下所示： CSS和HTML 页面的整个高度已填满，不需要滚动。 对于content div中的任何内容，设置将其放在标题的正下方。有时，内容将是一个实际表，
-
问题内容： 如何将div定位到包含div的底部？ 此代码将文本“放入”置于页面底部。 问题答案： 需要是 绝对定位会在DOM中寻找最接近的相对定位的父对象，如果未定义，它将使用主体。
-
我试图让id为的div作为列表项填充页面上的剩余高度。我对web开发前端相当陌生，尝试过几种不同的方法，但似乎都不起作用。 绿色边框的div是我想填充剩余高度的，也保持表单在上面。由于某种原因，窗口的整个高度已经有一个滚动条，我在想黑色/红色边框会一直到屏幕的底部，但也因为某种原因超过了它。关于如何解决这些问题有什么想法吗？ HTML/CSS标记：
-
问题内容： 我有一个带两个孩子的容器。第一个孩子有给定的身高。如何让第二个孩子占据容器的“自由空间” 而不给其指定高度？ 在示例中，粉红色也应占据白色空间。 与此问题类似：如何使div占据剩余高度？ 但是我不想摆 绝对的位置 。 问题答案： 可以通过多种方式扩展子级以填充剩余的空间，具体取决于您希望获得的浏览器支持以及是否具有定义的高度。 样本 格网 CSS的布局提供了另一种选择，尽管它可能不如F