当外容器尺寸增加时，如何使 div 仅向一个方向延伸？

Question

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

为了说明我的想法，这里是之前和之后的图像，黑色代表外部页面，蓝色代表页面容器，粉红色代表左侧导航，绿色代表容器的其余部分。这也是我正在编写的代码的一般结构。 jsfiddle link 包含一些 css 的详细信息。

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

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

目前，我的容器具有固定宽度和自动边距以便居中。在当前布局下，我想要实现的目标是否可行？我需要将 leftnav div 移出容器吗？

Answer 1

为了达到想要的效果，您需要将 leftCol 移到 container 之外，并给 rightCol 一个 margin-left，大小为 leftCol.

同时为您的 lefCol 添加最小宽度和最大宽度，并使用 calc 添加宽度以根据您的目标调整宽度。

注意：lefCol宽度是这样计算的：

100% / 2 - (容器宽度 / 2 - leftCol 最小宽度)

所以你修改后的 html 看起来像这样：

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

您的新 CSS 看起来像这样：

#page{
    background-color: purple;
}
#container {
    background-color: blue;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
#leftCol {
    float: left;
    background-color: red;
    height: 300px;
    min-width:100px;
    width:calc(100%/2 - 50px);
    max-width:200px;
}
#rightCol {
    margin-left:100px;
    background-color: green;
    height: 300px;
    width: 200px;
}

看看更新后的例子：

https://jsfiddle.net/xxyv7nwf/2/

Answer 2

您可以尝试以下方法：Full screen example

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 3

CSS 使用 CSS3 计算的解决方案。 已编辑。 根据 OP 更新。

@media screen and (min-width: 1600px)  {
            #container{
                margin:0 auto;          
          }

        }
        body {
            overflow-x:hidden;
        }
        #page{
            background-color: purple;
            height:300px;

        }
        #container{
            background-color: blue;
            min-width:980px;
            max-width: 1140px;

        }

        #leftCol {
            float: left;
            background-color: red;
            height: 300px;
            width: calc(100% - 780px);
        }
        #rightCol {
            float: left;
            background-color: green;
            height: 300px;
            width: 780px;
        }

HTML

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

Answer 4

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

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

已更新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;
}

这为#container 提供了最小和最大宽度，边距将显示在最大宽度之外。这些设置得非常小，以便在 JSFiddle.

中很好地显示

leftCol 将扩展以适应可用 space，它的右边距防止它溢出 rightCol。

rightCol 绝对定位（在 #container 内）在 leftCol 的边距中。

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

#outerwrapper 允许可见的右边距，直到页面至少达到最小宽度。如果您希望边距平衡，请将其边距更改为 0 5%

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

更新 3： 抱歉，我错过了您对 leftCol 最大宽度 360px 的要求。更新了上面的 CSS 和这里的 fiddle：https://jsfiddle.net/xuew6og5/4/

Answer 5

这是一个纯粹的 css 解决方案：fiddle

这是我在这里学到的技巧：here 你必须首先放置浮动，然后通过创建新的块格式化上下文使 div 尊重它，然后 div 将扩展到剩余的 space。投入几个 min/max 宽度以符合它和一个具有 min/max 宽度的包装器，它就位。 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;
    }

当外容器尺寸增加时，如何使 div 仅向一个方向延伸？

How do you make a div only extend in one direction when the outer container size increases?

html

javascript

css

layout