使页面的中间部分调整为底部剩余的空间？答案

【问题标题】：Make the middle section of the page resize to the rest of the space that's left by the bottom section?使页面的中间部分调整为底部剩余的空间？
【发布时间】：2014-08-21 16:21:24
【问题描述】：

所以我有一个标题（这是绝对的，在谷歌地图上）

然后屏幕空间应该在中间部分、面包屑和页脚（粘在底部）之间分割。

我支持 IE>10，所以我使用的是 flexbox。

页眉、页脚和面包屑应始终可见，中间部分应调整到空间左侧的大小，中间部分左右小部件的内容（不包括标题）应有滚动条如果它们超过了父级的大小（中间部分，它用蓝绿色边框着色）。

我不希望父部分可滚动，我希望小部件内容 (.widget__content) 可滚动。

这是html结构

 <div class='wrapper'>
    <div class='header'>
        <div class="header__txt">
            header text
        </div>
    </div>
    <div class='map-and-overlay'>
        <div class='map'></div>
        <div class='map-overlay'>
            <div class='widget widget-left'>
                <div class="widget__title">
                  Widget Title
                </div>
                <div class="widget__content">
                    <ul>
                        <li>item here</li>
                        <li>item here</li>
                        <li>item here</li>
                        <li>item here</li>
                        <li>item here</li>
                        <li>item here</li>
                        <li>item here</li>
                        <li>item here</li>
                        <li>item here</li>
                        <li>item here</li>
                    </ul>
                </div>
            </div>
            <div class='widget widget-right'>
                <div class="widget__title">
                  Widget Title
                </div>
                <img src="http://unsplash.it/500/300" />
            </div>
        </div>
    </div>
    <div class='breadcrumbs'>breadcrumbs</div>
    <div class='footer'>footer</div>
 </div>

我做了一个代码笔，如果有人可以帮助我用 flexbox 解决这个问题，那就太好了。

谢谢！ MYPEN

【问题讨论】：

标签： css flexbox

【解决方案1】：

如果我没有正确回答您的问题，我已经做了一些更改。如果我在任何地方出错或误解了错误的答案。

基本上，您希望拆分内容中的 2 个框以使用整个框并在页面缩小时缩小，为此您需要为两个框添加宽度并使用百分比来实现。

.widget-left{
background-color:green;
border:2px solid black;
margin-bottom:30px;
display:flex;
min-width:150px;
width: 50%;
}

.widget-right{
background-color:orange;
border:2px solid black;
margin-left:15px;
width: 50%;
}

（如果需要，您还可以添加高度并将其设置为百分比）

那么你希望他们能够在内容超出框空间时滚动，你只需要更改一行即可。

   overflow-y:scroll;

改为

   overflow-y:auto;

这只会在内容超出时显示滚动，并且不会始终可见。

【讨论】：