修复了响应式站点上右侧边栏折叠的问题答案

【问题标题】：Fixed right sidebar collapsing on responsive site修复了响应式站点上右侧边栏折叠的问题
【发布时间】：2013-10-01 03:38:08
【问题描述】：

我有一个 2 列站点：左列是流动的，右列是固定的。当我放大浏览器以查看站点如何响应时，右列似乎折叠在左列下方。我不希望这个右栏倒塌。我希望左主列随着站点的缩小而流畅地收缩。

这是我的基本代码：http://jsfiddle.net/kGkRD/

<section class="main">
    Left
</section>

<aside class="sidebar">
    Right
</aside>

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
section.main {
    float: left;
    max-width: 300px;
    width: 100%;
    background-color: red;
}
aside.sidebar {
    float: right;
    width: 200px;
    background-color: blue;
}

【问题讨论】：

如果您不希望它显示在另一个下方，您希望它做什么？
您希望发生什么？较大的应该缩小并保持侧边栏宽度固定，还是希望它们都设置为父容器的固定百分比（例如 70/30%），还是什么？将侧边栏包裹在特定屏幕尺寸以下的主要内容下方是响应式网页设计的一种非常常用的技术，因为您可以想象，在 320 像素宽的移动纵向视口上，您实际上并不需要占据三分之一屏幕的侧边栏。
较大的列（主）应该缩小，因为右列保持固定。

标签： html css responsive-design

【解决方案1】：

<aside class="sidebar">
    Hello World
</aside>
<section class="main">
    Hello World123
</section>

CSS

@media (max-width:500px){
section.main {
    //display:block;
    float:right;
}
}

Fiddle

编辑：请使用更新后的 CSS。尝试使用display:block 和float:right。

【讨论】：

这是我希望发生的事情，除了我打算插入一个宽度为 768 的媒体查询并且我希望将侧边栏放在底部。
我只是使用 768 作为示例，因为我的站点尺寸比示例小提琴中的要大得多。
ok.. 现在如果您发现我的答案是正确的，请将其标记为已回答。谢谢
这不完全正确，因为我希望侧边栏堆叠在主列下方。你是如何做到这一点的？
你的意思是它应该直接低于.main，而不是随着我们继续降低分辨率而缓慢？

【解决方案2】：

把你的右浮动元素放在第一位，从section.main中删除float: left;和width: 100%;并添加overflow: hidden;：http://jsfiddle.net/mdares/kGkRD/1/

HTML：

<aside class="sidebar">
    Hello World
</aside>
<section class="main">
    Hello World
</section>

CSS：

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
section.main {
    max-width: 300px;
    background-color: red;
    overflow: hidden;
}
aside.sidebar {
    float: right;
    width: 200px;
    background-color: blue;
}

更新：我理解正确吗？你正在寻找这个：http://jsfiddle.net/mdares/kGkRD/4/

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
section.main {
    max-width: 300px;
    width: 100%;
    background-color: red;
    overflow: hidden;
    float: left;
}
aside.sidebar {
    float: left;
    width: 200px;
    background-color: blue;
}

如果是这样，您只是错过了您的 overflow: hidden;

更新 2： 要解决您的评论，请尝试以下操作：http://jsfiddle.net/mdares/kGkRD/5/

CSS：

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
#container {
    position: relative;
    width: 100%;
}
section.main {
    max-width: 300px;
    width: 100%;
    background-color: red;
    overflow: hidden;
        float: left;
}
aside.sidebar {
    width: 200px;
    background-color: blue;
    position: absolute; 
    right: 0;
}

@media screen and (max-width: 350px) {
    aside.sidebar {
    position: static;
    float: left;
    }
}

HTML：

<div id="container">
  <section class="main">
    Hello World
  </section>
  <aside class="sidebar">
    Hello World
  </aside>
</div>

【讨论】：

使用媒体查询让我们假设宽度为 768，如果 side 在 html 顺序中堆叠得更高，我将如何将 section.main 堆叠在 side.sidebar 之上？
更新了 - 那就是你所追求的？
这几乎就是我想要的，除了主列应该保持灵活，右列不应该中断到下一行，直到媒体查询指示这样做。
更新了 @Media 查询，正在做我认为你想要的。