Question

我的网页的主要内容有两列，当视口变小时，此内容将被压缩，当视口变得更小时，“列”将在彼此下方显示。

它还有一个右侧边栏。侧边栏必须是固定宽度（下载按钮，社交按钮等）。它由两部分组成：

当视口变得太小（下载按钮）时，第一部分需要超出主要内容
第二部分需要低于主要内容（社交按钮）

我已经完成了大部分工作，除了右侧边栏的第二部分不希望在“列”低于另一个时一直向上浮动。我到目前为止的代码：

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0" />
<style>

#minmax {
    max-width: 940px;
    min-width: 280px;
    margin: 0 auto;
    background-color: #d0ffd0;
}

.right_sidebar_top {
    clear: right;
    width: 220px;
    float: right;
    margin: 0 0 10px 20px;
    background-color: #c0c0ff;
}

.content_wrapper {
    margin: 0 250px 10px 0;
    background-color: #ffff90;
}

.content_left_col {
    width: 48%;
    margin-right: 4%;
    background-color: #e0ffff;
    float: left;
}

.content_right_col {
    width: 48%;
    background-color: #e0e0ff;
    float: left;
}

.right_sidebar_bottom {
    clear: right;
    width: 220px;
    float: right;
    margin: 0 0 10px 20px;
    background-color: #ffe080;
}

@media only screen and (max-width: 799px) {
    .content_left_col {
        width: 100%;
        margin-right: 0;
    }
    .content_right_col {
        width: 100%;
    }
}

@media only screen and (max-width: 599px) {
    .right_sidebar_top {
        clear: both;
        width: 100%;
        float: left;
        margin: 0;
    }
    .content_wrapper {
        margin: 0 0 10px 0;
    }
    .right_sidebar_bottom {
        clear: both;
        width: 100%;
        float: left;
        margin: 0;
    }
}
</style>
</head>
<body>
    <div id="minmax">
        <div class="right_sidebar_top">Lorem ipsum</div>
        <div class="content_wrapper">
            <div class="content_left_col">Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Aliquam posuere mauris adipiscing neque
                faucibus ultrices nec nec sem. Praesent venenatis hendrerit arcu, in
                sollicitudin risus convallis faucibus.</div>
            <div class="content_right_col">Lorem ipsum</div>
        </div>
        <div class="right_sidebar_bottom">Lorem ipsum</div>
    </div>
</body>

我在这里看到了另一个使用右侧边栏的绝对定位的问题/解决方案，我认为在我的情况下不会起作用，因为它需要在另一个右侧边栏元素之下。我花了大约两天时间试图解决这个问题，所以我真的希望有人能够提出一个有效的方法！

修改

我希望我的目标受众大多是Android移动用户。对于使用较旧浏览器的少量桌面用户，我可以相对容易地提供无响应的960/12 css，但该解决方案应该适用于流行的Android浏览器。

Answer 1

使用display：table

这是一个不使用calc的选项，但您需要使用一个您将隐藏和显示的其他元素，具体取决于屏幕大小： Demo

在您的顶部侧边栏项目中添加另一个类：

<div class="right_sidebar_top one">Lorem ipsum</div>

然后用这个替换你的下边栏项目：

<div class="right_sidebar">
    <div class="right_sidebar_top two">Lorem ipsum</div>
    <div class="right_sidebar_bottom">Lorem ipsum</div>
</div>

然后在媒体查询之外使用此css。它隐藏了顶部侧边栏项并显示侧边栏分组。使用display: table-cell允许一个div为设置宽度，以及要扩展的内容：

.content_wrapper, .right_sidebar {
    display: table-cell;
    vertical-align: top;
}
.right_sidebar_top.one {
    display: none;
}
.right_sidebar_top.two{
    display: block;
}

然后在您的599px媒体查询中，隐藏分组中的顶部侧边栏并显示单个顶部侧边栏项并将其他所有内容设置回display: block以充当div：

.content_wrapper, .right_sidebar {
    display: block;
}
.right_sidebar_top.one {
    display: block;
}
.right_sidebar_top.two {
    display: none;
}

使用calc（）

如果您可以使用calc()，则可以选择以下选项： Demo

这允许div完全按照您的喜好流动。可能需要做一些小的调整才能准确地得到它。

.content_wrapper {
    width: calc(100% - 250px); // keeps the right side at 250px for the right sidebar
    background-color: #ffff90;
    float: left; // allows the two right column divs to float next to it
}

//to clear floats
#minmax:after {
    display: table;
    content:'';
    clear: both;
}

.right_sidebar_bottom {
    float: right;
}

@media-query(max-width: 599px){
    .content_wrapper {    
        width: 100%;
    }
}

Answer 2

我根据answer from brouxhaha：

自己想出了一个答案

从他的基于计算的回答中我发现问题在于所有的花车没有任何“实际尺寸”。所以我重新使用他的#maxmin：after idea来使内容区域“不透明”。与此同时，这会推开侧边栏，好像现在内容区域旁边显然没有空间。为了解决这个问题，我在侧边栏项目上设置了负边距，使它们与“不透明”内容重叠，因此它们会滑动到位。我让它成功了，可以看到一个例子here。

代码的变化（我认为这就是全部）：

#minmax:after {
    display: table;
    content:'';
    clear: both;
}

.right_sidebar_top {
    clear: right;
    width: 220px;
    float: right;
    margin-left: -220px;
    background-color: #c0c0ff;
}

.right_sidebar_bottom {
    width: 220px;
    float: right;
    margin-left: -220px;
    background-color: #ffe080;
    clear: right;
}

这是我将要实施的解决方案。我不喜欢使用负边距;这个解决方案并不觉得css帮助我从需求到实现，但更像是在解决css来完成工作。因此，如果有人知道这个问题的“更清洁”解决方案，请在此发布，以便其他人（像我一样）可以学习！

响应式设计：固定宽度的右侧边栏不会“浮起来”

2 个答案: