Question

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

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

我支持IE＆gt; 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

Answer 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;

这只会在内容超出时显示滚动，并且不会一直显示。

让页面的中间部分调整到底部剩下的剩余部分？

1 个答案: