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

我的网页的主要内容有两列，当视口变小时，这些内容将被压缩，而'列'将被显示在另一个之下视口变得更小。响应式设计：固定宽度的右侧边栏不会浮起来

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

第一部分需要去的主要内容上方时，视口过小（下载按钮）
第二部分需要去的主要内容如下（社交按钮）

我已经得到了大部分的这一点，除了右边栏的第二部分并不想在'列'彼此相连时一路漂浮。该代码我到目前为止有：

<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浏览器中使用。

来源

2013-12-11 Ewout

使用显示：表

这里是不使用计算的一种选择，但你需要使用你会隐藏和显示取决于屏幕尺寸的附加元素：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()，这是一个选项：Demo

这使得divs能够以您想要的方式流动。可能需要做一些小的调整才能得到你想要的。

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

来源

2013-12-11 23:09:18 brouxhaha

我有点新来CSS，所以谢谢你指出jsfiddle和calc; calc看起来像一个有用的工具，但它不被某些浏览器支持：这个布局在opera-mini和dolphin上出错。所以我正在寻找一个没有calc的解决方案。对不起，没有指出我的目标受众的问题（我的第一个问题，将编辑） – Ewout

嘿，我更新了我的答案非计算选项。如果你不喜欢使用额外的元素，我认为你最后的选择是JavaScript，我也可以提供一个例子。 – brouxhaha

如果我正确理解这一点，那将意味着包含两次顶部边栏的内容，并且只有其中一个可见。这将是我最后的选择。我根据你以前的回答找出了一些似乎正在工作的东西;这不需要计算或内容重复。 – Ewout

我想出了一个答案自己的基础上，answer from brouxhaha：

从他基于钙的答案我想这个问题是有没有任何“实际尺寸”所有的彩车。所以我重用了他的#maxmin：在想法之后使内容区域变得“不透明”。同时，这会推开边栏，好像现在显然没有空间位于内容区旁边。为了解决这个问题，我在侧边栏项目上调整了负边距，以使它们与“不透明”内容重叠，以便它们滑入到位。我做了它的工作，可以看到一个例子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来完成工作。所以，如果有人知道这个问题的“更清洁”的解决方案，请在这里发布，以便其他人（如我）可以学习！

来源

2013-12-13 12:54:52 Ewout

即使我的回答不完全符合您的要求，我很高兴它帮助您走向正确的方向。由于您的负边距等于您的宽度，不仅仅是一个随机数，我不会为使用它而感到不适。 – brouxhaha

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

回答

相关问题