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

Question

这里是第一次提问。

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

右栏的宽度为 400px 并且可以滚动。

左栏需要固定在左栏的左上角（不是滚动），占据 "box" 的剩余可用宽度，并在更大的屏幕尺寸下保持在 "Box" 内.

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

有什么建议吗？

Answer 1

这将满足您的需求。

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

<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>

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

Maintain position of fixed element in boxed layout, responsive design

css

css-position

fluid-layout