响应边栏

Question

响应侧边栏的最佳解决方案是什么？我有标题区域，内容区域，页脚区域和侧边栏区域。对于较小的屏幕，我希望侧边栏从右侧下降，最后在内容区域下方和页脚上方。我该怎么做呢？

..................................................................................
.                                                                   .            .
.                                Header                             .            .
.....................................................................            .
.                                                                   .            .
.                                                                   .            .
.                                                                   .            . 
.                                                                   .  Sidebar   .
.                                                                   .            .
.                                Content                            .            .
.                                                                   .            .
.                                                                   .            .
..................................................................................
.                                                                                .
.                                Footer                                          .
..................................................................................                                                                                .

Answer 1

为此，您可以使用media queries。它们允许您根据屏幕大小有条件地应用css。

以下是一个例子：

@media (min-width: 700px) {    
  .content {
    float: left;
  }    
}

所以您可能会做的是根据屏幕大小更改侧边栏的浮动。

我推荐本指南以获取更多信息：http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Answer 2

这里有一个我创建的快速示例代码。正如Kade Keithy所提到的http://jsfiddle.net/jtorrescr/CNf8Q/，您需要使用@media来确定您想要更改布局的屏幕分辨率。因此，只需重置您正在使用的内容，即可在@media中创建您的旁边。

HTML

<div id="container">
    <div id="header">
        Header
    </div>   
    <div id="content">
        Content
    </div>
     <div id="sidebar">
        sidebar
    </div>
    <div id="footer" class="clearfix">
        footer
    </div>
</div>    

CSS

#sidebar
{
    height:60px;
    background-color:orange;
    top:0;
    right:0;
}
#sidebar
{
    width:20%;
    height: 360px;
    float:right;
    margin-top:-360px;
}

#header, #content
{
    width:80%;
}

#header
{
    height:60px;
    background-color:pink;
}
#content
{
    height:300px;
    background-color:yellow;
}
#footer
{
    height:60px;
    background-color:green;
    width:100%;
}

@media (max-width: 500px) 
{    
    #container
    {
        width:100%;
    }
    #sidebar
    {
        width:100%;
        height:60px;
        float:none;
        margin-top:0;
    }
    #header, #content
    {
        width:100%;
    }
}