当外部容器尺寸增加时，如何使div只向一个方向扩展？

Question

我正在尝试制作一个页面容器，其中左边有一个导航条(容器内部)。当外部页面比容器更宽时，我只希望导航条向左扩展到一定大小，而容器的其余内容保持不变并停留在外部页面的中间。

为了说明我的想法，这里是前后图像，黑色表示外部页面，蓝色表示页面容器，粉色表示左侧导航，绿色表示容器的其余部分。

这里也是我正在编写的代码的一般结构。jsfiddle链接包括一些css的细节。

<div id="page">
<div id="container">
    <div id="leftCol">
        LEFT
    </div>
    <div id="rightCol">
        RIGHT
    </div>
</div>

​

https://jsfiddle.net/6L1zrj6e/1/

目前，我的集装箱有一个固定的宽度和自动边距，以使它的中心。用目前的布局，我所要达到的目标是否可能？我需要把左边的div移到容器外面吗？

Answer 1

您可以尝试以下方法：全屏示例

jsFiddle

HTML：(将leftCol从容器中取出)

<div id="page">
    <div id="leftCol">
            LEFT
        </div>
    <div id="container">       
        <div id="rightCol">
            RIGHT
        </div>
    </div>
</div>

JS：(更新页面大小和加载时的宽度)

$(window).on('resize', function(){
    var containerWidth = 980;
    var pageWidth = $(window).width();

    var tempW = Math.max(0, pageWidth-containerWidth) / 2;
    tempW  += 200;
    var w = Math.min(tempW, 360); // 360 = max width
    var l = Math.max(0, tempW - w);
    $('#leftCol').css({'width': w+'px', 'left': l+'px'});
}).resize();

CSS：(删除浮标，使用leftCol的绝对位置)

#page{
    background-color: purple;
    position:relative;
}
#container {
    background-color: blue;
    width: 980px;
    height: 300px;
    margin: 0 auto;
}
#leftCol {
    position:absolute;
    top: 0;
    left: 0;
    background-color: red;
    height: 300px;
    width: 200px;
}
#rightCol {
    padding-left:200px;
    background-color: green;
    height: 300px;
    width: auto;
}

Answer 2

以下是一个纯css解决方案：小提琴

这是我在这里学到的一个技巧：这里，您必须首先放置浮点数，然后通过创建一个新的块格式上下文来使div尊重它，然后div将扩展到剩余的空间。加上几分钟/最大宽度，以符合它和一个包装的最小/最大宽度，以及它的地方。html背景使得主体背景不再像通常那样延伸到身体上。又一个小把戏。

    <div class="wrap">
        <main></main>
        <nav></nav>
    </div>

    html {
        background: white;
    }
    body {
        background: purple;
        padding: 0;
        margin: 0;
    }
    .wrap {
        margin: 0 auto;
        max-width: 1080px;
        min-width: 920px;
    }
    nav {
        overflow: auto; /* force a new context to respect float */
        background: red;
        height: 300px;
        min-width: 200px;
        max-width: 360px;
    }
    main {
        float: right;
        background: green;
        height: 300px;
        width: 720px;
    }

Answer 3

这就是我认为你想要的-如果我错了，请原谅我！

编辑:为右边距添加外部容器包装器

更新的HTML：

<div id="page">
    <div id="outercontainer">
    <div id="container">
        <div id="leftCol">
            LEFT
        </div>
        <div id="rightCol">
            RIGHT
        </div>
    </div>
    </div>
</div>

和CSS：

#page{
    background-color: purple;
    height: 300px;
}
#outercontainer {
    margin: 0 5% 0 0;
}
#container {
    background-color: blue;
    height: 300px;
    margin: 0 auto;
    min-width: 300px;
    max-width: 600px;
    position: relative;
}
#leftCol {
    background-color: red;
    height: 300px;
    margin-right: 200px;
}
#rightCol {
    position: absolute;
    background-color: green;
    width: 200px;
    top: 0;
    right: 0;
    bottom: 0;
}

这给#容器一个分钟和最大宽度，边距将显示超过最大值。这些设置很小，可以在JSFiddle中很好地显示出来。

leftCol将扩展到适合可用的空间，并且它的右边距可以防止它溢出rightCol。

rightCol绝对定位在左侧的空白处(在#容器内)。

JSFiddle这里：https://jsfiddle.net/xuew6og5/1/

外部包装器允许一个可见的右边距，直到页面至少达到最小宽度。如果要平衡边距，请将其边距更改为0 5%。

更新:新的JS和右边距：https://jsfiddle.net/xuew6og5/2/

更新3:对不起，我错过了您对leftCol上最大宽度360 on的要求。更新了上面的CSS，这里还有一个小提琴：https://jsfiddle.net/xuew6og5/4/