固定侧边栏但响应式布局答案

【问题标题】：Fixed sidebar but responsive layout固定侧边栏但响应式布局
【发布时间】：2014-05-30 00:22:32
【问题描述】：

这是我目前正在开发的网站的预览：http://jsfiddle.net/X4Yc8/

它有一个固定的（全高）侧边栏和一个滚动的主要内容部分。

当窗口宽度减小时（见下面的截图），主要内容与侧边栏重叠。如何确保不会发生这种情况？

http://imgur.com/sGY5KeN

理想情况下，当屏幕具有一定宽度时，我希望主要内容显示在侧边栏下方，例如在手机大小的屏幕上查看时

提前感谢您的帮助！

我的代码是：

CSS

    /* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html, body {
    height:100%;
    margin: 0px;
    padding: 0px;
    color: #FFF;
    background-color: #06C;
}

#sidebar {
    width: 250px;
    height: 100%;
    left: 0;
    float:left;
    background-color: #006;
    padding-top: 25px;
    position: fixed;
    clear: right;
}

section#settings {
    width:auto;
    float:left;
    margin-left:250px;
    padding-top: 60px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    position: absolute;
}

#sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
}
#sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited {
font-family: 'Open Sans', sans-serif;   font-size: 80%;
    color: #FFF;
    text-decoration: none;
}
#logo {
    height: 90px;
    width: 200px;
    margin-top: 0px;
    margin-right: 25px;
    margin-bottom: 25px;
    margin-left: 25px;
}

#sidebar #menubar li:hover {
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: #06C;
}
#sidebar #menubar li a:hover {
font-family: 'Open Sans', sans-serif;   font-size: 80%;
    color: #FFF;
    text-decoration: none;
}

#sidebar    #menubar li#active{
font-family: 'Open Sans', sans-serif;   
    color: #FFF;
    text-decoration: none;
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: #0066CC;
}

#sidebar #menubar  {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
h1 {
font-family: 'Open Sans', sans-serif;   font-size: 150%;
    color: #FFF;
    text-decoration: none;
}
h2 {
font-family: 'Open Sans', sans-serif;   font-size: 150%;
    color: #FFF;
    text-decoration: none;
}
h3 {
font-family: 'Open Sans', sans-serif;   font-size: 125%;
    color: #FFF;
    text-decoration: none;
}
p {
font-family: 'Open Sans', sans-serif;   font-size: 100%;
    text-decoration: none;
    color: #FFF;
    line-height: 125%;
}

HTML

<body>
<section id="sidebar">
<div id="logo"><img src="LOGO" width="200" height="89" alt="LOGO" /></div>
<ul id="menubar">
      <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>

    </ul> 
        </section>

<section id="settings">
  <h1>Heading 1</h1>
  <p>Sed ultricies ut massa a vehicula. Nullam consequat lectus ut mauris venenatis, quis tincidunt urna malesuada. Donec pellentesque, lectus a eleifend tempus, dui ante porta tellus, nec lacinia tellus quam sed sem. Integer lorem nibh, pulvinar nec est ac, consectetur tincidunt dolor. Etiam fermentum aliquam sapien, nec eleifend arcuus dui, et vehicula tellus viverra ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis semper tellus eget est faucibus, et euismod quam viverra. Sed dapibus felis a mi mattis, eu ultrices tortor ultricies. Nulla facilisi. Duis blandit leo sed volutpat condimentum. Nullam molestie dictum est, quis volutpat augue faucibus eu. Pellentesque turpis ante, hendrerit id felis sit amet, semper elementum erat. Maecenas vitae justo ullamcorper, ultrices felis at, volutpat erat. Proin diam enim, ultricies ut erat sed, eleifend sagittis dui. Pellentesque diam magna, mattis non nulla nec, varius commodo tortor. 
 </p><p>
Curabitur mollis nunc eu adipiscing interdum. Nunc nec eleifend enim. Morbi congue metus justo, nec facilisis mauris vulputate id. Sed id laoreet arcu. Aliquam sed nunc ligula. Vivamus bibendum dictum nisi, in placerat lacus convallis vitae. Quisque placerat orci non quam fringilla, ac dictum ligula imperdiet. Proin vel nibh tellus. Sed pellentesque feugiat augue sed convallis. Nunc lobortis sem odio, eget tempor urna suscipit at. Vivamus accumsan, enim id cursus elementum, quam velit cursus sapien, in semper nulla ligula nec mi. Proin pretium nunc vel leo ultricies placerat. 
 </p><p>
Integer sed leo auctor, lobortis dui ut, sodales nunc. Aliquam mi risus, rutrum sit amet ultrices faucibus, tincidunt eget sapien. Nam vel purus eu dolor rutrum dapibus. Phasellus euismod erat ac gravida adipiscing. Sed ligula quam, ultricies id mollis vitae, consequat eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam velit, feugiat in facilisis vitae, gravida ac enim. Nunc venenatis enim eu aliquam ultrices. Curabitur et lorem non leo pretium vulputate in at ligula. Quisque dignissim pretium erat non suscipit. Phasellus aliquet dolor at sapien egestas sollicitudin. Fusce eget est sed tellus mollis eleifend laoreet a lectus. 
</p>
</section>
<div style='clear:both;'></div>

</body>
</html>

【问题讨论】：

我无法早点发布此内容，但这是我希望内容显示在较小屏幕/移动设备上的示例：imgur.com/6oiXYNI

标签： html css responsive-design

【解决方案1】：

使用 css @media 根据窗口宽度改变样式，例如：

@media (max-width: 600px){
 #sidebar{
    position:relative;
    height:auto;
    width:100%;
    float:left;
  }
 #menubar li{
 display:inline;    
}

http://jsfiddle.net/X4Yc8/2/

【讨论】：

这很有帮助。我试试看。

【解决方案2】：

http://jsfiddle.net/X4Yc8/12/

为了移动友好性试试这个，然后添加 Jquery Swipe 或触摸来打开菜单，而不是总是显示它

http://api.jquerymobile.com/swipe/

@media only screen and (max-width: 500px) {

这行代码针对屏幕尺寸

【讨论】：

感谢您的提示。 Andrew 的解决方案最适合我所追求的，但我已将“@media only screen”添加到我的 css 中。