如何将动态 div 锚定到屏幕上？答案

【问题标题】：How to anchor a dynamic div to the screen?如何将动态 div 锚定到屏幕上？
【发布时间】：2015-09-12 01:26:23
【问题描述】：

我正在寻找一种方法将我的屏幕完美地分成两个 div。一个小的固定尺寸在左边，一个动态宽度在右边。

我还没想好怎么做。因为百分比的宽度不成比例。

如果您调整结果字段的大小或整体宽度，您会看到绿色 div 不会与屏幕成比例地调整大小。如果该字段变小，则绿色 div 会滑到红色 div 之下。

我需要的是某种锚。让绿色的 div 填满整个屏幕变大。

HTML：

<body>
    <div id="content">
        <div class="left">left</div>

        <div class="right">right</div>
    </div>
</body>

CSS：

body {
height: 300px;
}

#content {
    height: 100%;
}

.left {

    float: left;
    margin-left: 10px;
    background-color: red;
    height: 100%;
    width: 200px;
}
.right {
    float: left;
    margin-left: 10px;
    background-color: green;
    height: 100%;
    width: 80%;
}

【问题讨论】：

标签： css html width screen

【解决方案1】：

我希望我正确地解释了您的问题。你可以try this fiddle

body {
    height: 300px;
}

#content {
    height: 100%;
}

.left {
    float: left;
    margin-left: 10px;
    background-color: red;
    height: 100%;
    width: 200px;
}
.right {
    margin-left: 200px;
    background-color: green;
    height: 100%;
}

我已将.right 的margin-left 设置为等于.left 的宽度。但是不要float右侧面板，它会填满剩余的空间。

【讨论】：

谢谢你，斯科特这正是我正在寻找的。又好又简单。

【解决方案2】：

我建议使用布局框架来缓解这种思考。 Bootstrap 是一个很好的，但还有很多其他的。

如果你想手动做，你需要给 Content 类一个宽度，并使用相对定位。

【讨论】：

嘿，我确实使用了 Bootstrap，但是 container-fluid 类没有按照我的意愿完成这项工作。我刚从 bootstrap 开始，必须弄清楚它的最大潜力。 Scoots 方法的效果非常好