在盒装布局中保持固定元素的位置，响应式设计

【问题标题】：Maintain position of fixed element in boxed layout, responsive design在盒装布局中保持固定元素的位置，响应式设计
【发布时间】：2016-02-02 16:35:46
【问题描述】：

第一次在这里提问。

我有一个由 2 列组成的盒装布局（最大宽度 1014 像素）。

右栏的宽度为 400 像素，并且可以滚动。

左栏需要固定在左栏的左上角（不是滚动），占据“盒子”剩余的可用宽度，并在较大的屏幕尺寸下保持在“盒子”内。

在小于 1024 像素的屏幕尺寸下，只有左列应以流畅的样式牺牲宽度，而右列保持其宽度。

有什么建议吗？

【问题讨论】：

标签： css css-position fluid-layout

【解决方案1】：

这将满足您的需求。

基本上，一个固定左侧的 div 具有流畅的布局，但在 1024 像素处有一个断点，通过左边距 hack 将其变成一个固定宽度的固定 div。

<div class="box">
    <div class="left-col">
        left
    </div>
    <div class="right-col">
        right
    </div>
</div>
<style>
body {
    margin: 0;
}
.box {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
}
.right-col {
    position: absolute;
    right: 0px;
    width: 400px;
}
.left-col {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 400px;
}
@media screen and (min-width: 1024px) {
    .left-col {
        width: 624px;
        left: -512px;
        right: initial;
        margin-left: 50%;
    }
}
</style>

【讨论】：

是的，没问题。真的非常感谢。