html - 在浏览器调整大小时水平收缩中间 div

Question

我有一个使用内联 block div 创建的 3 列布局。左列和右列的宽度是固定的，但内列用于容纳动态内容，并且应根据其内容宽度的需要水平扩展。

这很简单...棘手的部分是当浏览器窗口(水平)小于左侧、右侧和展开的中间 div 的宽度时，我希望中间 div 滚动而侧栏保留固定的。换句话说，中间 div 的大小应随着窗口大小的调整而缩小和增大，但不应超出可用空间。

简单地布置 div 看起来像这样 https://jsfiddle.net/xzjp5xef/1/

HTML:

<div id="container">
   <div id="lcol">
      left
   </div>
   <div id="midcol">
      <div id="spacer">
         150px spacer
      </div>
   </div>
   <div id="rightcol">
      right
   </div>
</div>

CSS:

div {
    height:200px;
    border-style:solid;
    display: inline-block;
    border-width: 1px;
    vertical-align: top;
}
#container{
    white-space: nowrap;
}
#lcol {
    background-color:blue;
    width: 100px;    
}
#midcol {
    background-color: yellow;
    overflow-x: auto;
}
#spacer {
    min-width: 150px;
    margin: 10px;
    height: 20px;
}
#rightcol {
    background-color: red;
    width:100px;
}

“spacer”div 的要点是表示动态内容，在本例中我已将其固定为 150px 加上填充。所以在这种情况下，我希望 div 以它们在上面的 fiddle 中的方式布局，但是当窗口水平收缩时，我希望 middle div 滚动，左右 div 滚动保持完全可见。

那失败了，因为窗口有一个滚动条，但中间面板保持相同的宽度，右侧的 div 消失在滚动区域中。

我的下一次尝试是使用绝对定位 https://jsfiddle.net/n4zrLqh2/ 我将左边的div固定在左边，右边的div固定在右边，并设置中间div的左右属性。这是一个巧妙的技巧，它允许中间的 div 拉伸(stretch)并占用所有可用空间。这很好用，但当窗口很大时不会产生我想要的效果 - 因为我不希望中间列扩展得比包含其内容所需的更多。

最后我用 javascript 解决了这个问题，但更喜欢 CSS 解决方案。

编辑:为了帮助其他人了解我正在努力实现的目标，这里是完整的 javascript 解决方案(我更愿意使用纯 CSS 实现):

HTML:

<div id="lcol">left</div>
<div id="midcol">
    <div id="spacer">150px spacer</div>
</div>
<div id="rightcol">right</div>

CSS:

div {
    height:200px;
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    float:left;
}
body {
    white-space: nowrap;
    margin:0px;
    max-height: 200px;
}
#lcol {
    background-color:blue;
    width: 100px;
}
#midcol {
    background-color: yellow;
    overflow-x: auto;
}
#spacer {
    min-width: 150px;
    height: 20px;
    background-color: gray;
    margin: 5px;
}
#rightcol {
    background-color: red;
    width:100px;
}

JavaScript(使用 jquery)

function adjustSizes() {
    // Sizes of middle divs are dynamic. Adjust once
    // built or whenever the viewport resizes
    //
    var $leftDiv = $('#lcol')
    var $milddleDiv = $('#midcol');
    var $rightDiv = $('#rightcol');

    // 1. Resize middle div to available viewport space
    var maxBodyWidth = $(window).innerWidth() - ($leftDiv.outerWidth() + $rightDiv.outerWidth());
    $milddleDiv.css('maxWidth', maxBodyWidth);

}

$(window).resize(function () {
    adjustSizes();
});

还有 fiddle :https://jsfiddle.net/bjmekkgj/2/

Answer 1

我认为设置 spacer 的 max-width 可以解决内容增加时的问题。
如果所有边距和填充均为 0，则将 max-width 设置为 calc(100vw - 200px)。否则调整值 200px 并考虑边距和填充。
< br/> 我创建了一个plunker。请检查它是否解决了您的问题。在spearate窗口中运行plunker后尝试检查
http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview