Question

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

这很简单......棘手的部分是当浏览器窗口比左，右和扩展的中间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;
}

＆＃34; spacer＆＃34; div表示动态内容，在这种情况下，我已经固定为150px加上填充。因此，在这种情况下，我希望div在上面的小提琴中布置它们的方式，但是当窗口水平缩小时，我希望中间 div滚动，左边和右边的div为保持完全可见。

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

我的下一次尝试是使用绝对定位 https://jsfiddle.net/n4zrLqh2/ 我将左侧div固定在左侧，将右侧div固定在右侧，并设置中间div的左右属性。这是一个巧妙的技巧，允许中间div伸展并占用所有可用空间。这很好用，但是当窗口很大时我没有创建效果 - 因为我不希望中间列进一步扩展而不是包含其内容。

最后我用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();
});

小提琴：https://jsfiddle.net/bjmekkgj/2/

Answer 1

我认为设置max-width的{{1}}将解决您的问题，以防内容增加。
如果所有保证金和填充均为0，则将spacer设置为max-width。否则，请考虑保证金，填充值调整值200px。

我创造了一个plunker。请检查它是否解决了您的问题。在Spearate窗口中运行plunker后尝试检查 http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview

Answer 2

对于您提供的一个示例，由于左侧和右侧列绝对定位，您应该以某种方式占用空间。我在中间列上使用了填充，然后在里面嵌套了一个“内容”块，表示中间列的可见部分。然后，我将overflow-x: auto;放在新内容块上，并在整个容器上设置max-width以强制新块缩小。

（在之前的编辑中，我试图做同样的事情，但使用浮动而不是绝对定位的div）

* { margin: 0px; padding: 0px; }

#container {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    max-width: 100%;
    border: 1px solid black;
    height: 200px;
}

.column {
    box-sizing: border-box;
    height: 100%;
}

#left {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 100px;
    border-right: 1px solid black;
    background: blue;
}

#mid {
    border: none;
    padding: 0px 100px;
}
#mid > .content {
    box-sizing: border-box;
    background-color: yellow;
    overflow-x: auto;
    height: 100%;
}

#spacer {
    width: 150px;
    height: 20px;
}

#right {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 100px;
    border-left: 1px solid black;
    background: red;
}

<div id="container">
    <div id="left" class="column">
        left
    </div>
    <div id="mid" class="column">
        <div class="content">
            <div id="spacer">
                150px spacer
            </div>
        </div>
    </div>
    <div id="right" class="column">
        right
    </div>
</div>

...和in JSFiddle form

Answer 3

flexbox可以做到这一点。

＆＃13;

div {
  border-style: solid;
  border-width: 1px;
}
#container {
  height: 200px;
  display: flex;
}
#lcol {
  background-color: blue;
  width: 100px;
}
#midcol {
  background-color: yellow;
  flex: 1;
  overflow-x: auto;
}
#rightcol {
  background-color: red;
  width: 100px;
}

＆＃13;

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

＆＃13;

JSfiddle Demo（显示溢出效果）。

支持IE10及以上。

Answer 4

尝试将中间div设置为具有百分比的最大宽度，以便屏幕尺寸变得更薄：

.midcol { 
  max-width: 25%; 
}

我为此添加了max-width的值，但您可以更改该值。

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

4 个答案: