个人中心
gpt4 book ai didi

html - 固定侧边栏但响应式布局

转载 作者：太空宇宙 更新时间：2023-11-03 18:09:45 25 4
gpt4 key购买 nike

这是我目前正在处理的网站的预览: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>

最佳答案

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

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

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

关于html - 固定侧边栏但响应式布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23937663/

25 4 0
文章推荐： css - 在 Bootstrap 3 中将 Glyphicons 放在导航栏元素的前面？
文章推荐： c# - 有没有一种方法可以在不使用Add或AddRange的情况下将T转换为IEnumerable
文章推荐： c# - 在aspx.cs(在后面的代码)asp.net中创建RequiredFieldValidator
文章推荐： html - CSS3 动画，不太正确
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com