Question

我正在寻找一种方法将我的屏幕完美地分成两个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%;
}

Answer 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%;
}

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

Result

Answer 2

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

如果要手动执行此操作，则需要为Content类指定宽度，并使用相对定位。

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

2 个答案: