Question

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

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

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

理想情况下，当屏幕为特定宽度时，我希望主要内容显示在侧边栏下方，例如在移动大小的屏幕上观看时

提前感谢您的帮助！

我的代码是：

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>

Answer 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/

Answer 2

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

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

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

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

此行代码定位屏幕尺寸

固定侧边栏但响应式布局

2 个答案: