响应式侧边栏

Question

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

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

Answer 1

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

超文本标记语言

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