响应式布局，内容包含侧边栏

Question

仅使用CSS来寻找可响应的布局，使其表现出与所示图像类似的效果。 该站点有5个基本区域。 页眉，左手导航，内容，侧边栏和页脚。 到目前为止，除了内容/边栏关系之外，我还完成了所有其他工作。 对于桌面站点，绿色的侧边栏浮动在内容区域的内部和右侧，当侧边栏结束时，内容将围绕它滚动。 在移动网站上，侧边栏移至内容下方。 我遇到的问题正在使这种情况发生。 我可以让它在没有换行的情况下向左浮动，然后移至内容的下方，但要使内容也换行以补充侧栏，这确实很麻烦。 有指针吗？

Answer 1

那这种方法呢？

请注意，以下摘录尚未完成，但希望可以为您提供一个好主意：

对于桌面版本：为了在内容部分正确显示侧边栏，最好的办法是将侧边栏部分绝对定位。 像这样：

 #content {
      position: relative; 
 }


 #sidebar {
      position: absolute;
      right: 0px;
      top: 0px;
 }

上面的代码要求“边栏”由“内容”包裹，这将导致以下代码出现问题：

智能手机/平板电脑支持：要将所有部分很好地堆叠在智能手机上：

 @media screen and (min-width: 0px) and (max-width: 900px)  {

   #navigation, #content, #sidebar, #footer  {
      width: 100%;
      float: left;
      clear: both;
      border-top: 1px solid #ccc;
      margin-top: 20px;
      background: none;
      position: relative;
   }

 }

现在，我们的最后一个问题是“侧边栏”仍被“内容”包裹着的事实。 解决此问题的几种方法；

1. 使用JavaScript根据屏幕宽度将#sidebar移入另一个块或从另一个块移出。
2. 引入第二个侧边栏部分（例如＃sidebar-mobile），该部分仅在您使用移动设备时可见。 显然，在这种情况下，第一个侧边栏将不可见。

Answer 2

这是您用于内容区域的代码。

    <div id="content">
        <div id="sidebar">
         sidebar
        </div>
         content
    </div>
<div id="footer">footer</div>

这也是台式机和设备的CSS。

#content {background:yellow; padding:20px;}
#content p{ margin:0;}
#sidebar {background:green; float:right; padding:10px; margin:0 0 10px 10px;}
#footer{background:#2AABE4;}

@media only screen and (max-width: 420px) {
#sidebar{ float:none; margin:0;}

}

现在，我们必须使用jquery的一小部分将#content和#footer之间的一侧放置在设备中。 这里是jquery的代码。

function setlayout(){
    //alert($(window).width())
  if( $(window).width() < 420 ){
    $('#sidebar').insertBefore('#footer');
  } else {
      $('#sidebar').prependTo('#content');
  };
};

$(window).on('resize load', function(){  setlayout() });

上面的代码还将适用于窗口大小调整和窗口加载。

当您调整浏览器的大小在420以下时，它将移动div。 您可以根据需要修改宽度。

有关工作示例，请访问下面的链接。 http://jsfiddle.net/rakeshpersonal/hknBb/

Answer 3

您可以（ab）使用CSS display:table 仅使用CSS而不使用任何Javascript来有效地重新排列div 。

将初始格式用于“桌面”视图。

在移动视图（可以通过CSS3媒体查询激活）中，将display: table应用于页面上其他所有内容的包装器（或直接应用于body标记）。 然后，使用display: table-footer-group将侧栏和页脚推到底部，并使用float: none删除其float属性。

Answer 4

以下是基于您的html这样的假设。

<div id="content">
    <div id="sidebar">
    </div>
</div>

对于台式机：

#sidebar {
    position: absolute;
    right: 0;
    top: 0;
}

对于手机：

#sidebar {
    position: relative;
    margin-top: 16px;
}

您可能需要相对于内容具有位置，才能使内容起作用，但如果没有，则可能存在其他解决方案

#content {
    position: relative;
}