Question

我正在尝试创建一个固定标题，在滚动时粘在顶部。我有一个包装器（#topbarwrapper），它应该适合整个浏览器100％。我在（#topbarwrapper）中还有另一个div包装器（.topbarcontentWRAPPER），它包含徽标和导航（#mainNav）。一个漂浮在左边，另一个漂浮到右边。它们都应该浮动，但似乎在调整浏览器大小时，div会移动。我希望浮动的两个div与整个页面居中。布局响应，因此车身宽度为90％。我花了几天时间试图解决这个问题，包括研究。任何帮助将不胜感激。

理想的目标是让100％宽度的标题固定并居中。

布局视图： http://s30.postimg.org/so036qarl/Screen_shot_2014_03_10_at_1_53_42_AM.jpg

HTML：

     <body>

        <div id="topbarWRAPPER">
                           <div class="topbarcontentWRAPPER">
              <a href="http://link" title="fvfg" id="topbarLOGO"></a>
              <nav id="mainNav" role="navigation">
                <h2 class="hidden">Main Site Navigation</h2>
                 <?php if ($this->countModules('nav')): ?>
                 <jdoc:include type="modules" name="nav"   />
                 <?php endif; ?> 
              </nav>
           </div>
   </div>     
        <div id="mobilelogo"></div>



          <div id="imageshow">


      </div>


       <div class="wrap">


           <div class="miscellaneousRow">

              </div>


              <div class="search">

              </div>

           </div> 

           <section><h2 class="hidden">Recent News</h2>
           <article id="recentNews">
              <jdoc:include type="component" />
           </article>
           </section>


           <aside>
               <div class="sideBOX">    <section>  
                 <h1 class="sideHeader">MAILING LIST</h1>

                 <div class="signup">

              </section>   </div>


            <div class="sideBOX">   <section>



            </section></div>


         <div class="tabviewTABS">    <section> 


           </section>
               </div>      </aside>

        <footer id="mainbottomFooter">
           <div class="footerFLOATLEFT">
            <h1 class="hidden">Footer</h1>
              <div class="floatone">

              </div>
           </div>

        </footer>
          <div class="secondbottomFooter"> <div class="secondbottomfooterRight">


                  <nav id="sidenav">


                    <ul>

                       <li>

                        <a href="http://www.link.com" target="_blank">l</a>
                       </li>

                       <li>        


                          <a href="http://www.link.com" target="_blank">f</a>
                       </li>

                       <li>

                          <a href="https://link.com" target="_blank">g</a>
                       </li>

                       <li>

                          <a href="http://link.com" target="_blank">x</a>
                       </li>

                       <li>

                          <a href="about.asp">!</a>
                       </li>
                    </ul>
                 </nav>  
              </div>
            <div class="secondbottomfooterLeft"> content</a></div>

           </div>
  </html>

body {
    width:90%;
    margin:0 auto;
    min-width:1024px;
    max-width:1580px;

    }


 .latest-post clearfix{
    display:hidden;}

.imageshow {
    position:relative;
    width: 100%;


}

 .blog-readmore{
    font-size: 24px;
    display: inline;
    width: 180px;
    text-transform:uppercase;
    margin-top:20px;


}



.blog-readmore a:link{
    font-family: arial;

    color: #690000;

    }
.blog-readmore a:visited{
        color: #690000;

}

.blog-readmore a:hover{
        color: #eee;

}



#topbarWRAPPER{
    position:fixed;
    left: 0px;
    right: 0px;
    background-color:#000;
    z-index:1000;
    text-align:center;

}

.topbarcontentWRAPPER {
    display:block;
    height:50px;
    background-color: #1E1E1E;
width: 90%;
    margin: 0 auto;
}





     #topbarLOGO
{

    background-image:url("http://strip2.png");
    background-repeat:no-repeat;
   display:block;      
    float:left;
    height:50px;
    width:250px;
      text-indent:-9999px;
}


aside{
        background-color: #d6d6d6;
    width: 29.1%;
padding-left:1%;

height: 100%;
    float: right;
    overflow: none;
        color: #fff;
                        font-size:10px;
                padding-bottom:1000em;
margin-bottom:-1000em
} 




         /* Blog content */



#recentNews {
    width: 65.1%;
    float: left;
    padding-right:2%;
    padding-left:2%;
    padding-bottom:2%;
background-color:#fff;
padding-bottom:1000em;
margin-bottom:-1000em;
    }


.wrap{ overflow:hidden;
background-color:#fff;
}

/* ~~ Bottom footer ~~ */
#mainbottomFooter{

    background-color:#000;
    position:relative;
    height: 300px;
        clear: both;
        padding:15px 0;
        min-width:100%;

    }


.footerFLOATLEFT li{
     list-style-type: none;
    padding-bottom: 1em;
        padding-top: 1em;
     }




.footerFLOATLEFT a:link{
    font-size:12px;
    color: #555555;
    text-transform:uppercase;}


.footerFLOATLEFT a:visited {
font-size:12px;
    color: #555555;
    text-transform:uppercase;}

    .footerFLOATLEFT a:hover {
font-size:12px;
    color: #690000;
    text-transform:uppercase;}


     /* ~~ P~~ */

p{
            font-size: 17px;
        color: #000; 
        line-height:140%;
    font-family: 'HelveticaNeue';
    padding-left: 1%;
    padding-right:1%;
    font-weight:bold;


     }

h3 {
        margin-bottom: 0px;
font-size: 2em;
color: #690000;
font-family: 'Lato', sans-serif;
font-weight:300;
text-transform:uppercase;
padding-bottom:1em;
padding-top:1em;


}




.floatone {
    float:left;
        padding-right: 4em;
            padding-top: 4em;
            height: 100%;}


.floattwo {

    float:left;
    height: 100%;
        padding: 4em;}


.floatthree {
    float:left;
    height: 100%;
        padding: 4em;}


.floatfour {
    float:left;
    height: 100%;
        padding: 4em;}


.signup {
        width:100%;}





.footerFLOATLEFT {
width:100%;
float:left;

  }


.secondbottomFooter {
    width: 100%;
    height:40px;
background-color:#690000;
border-top:1px solid #222;
border-bottom:1px solid #222;
color: #fff;
font-size: 12px;

padding-top:2em;
padding-bottom:2em;
text-align:right;
  }


h2 {font-face:arial;
    font-size:12px;
    color: #fff;
    padding-top: 1em;
        padding-bottom: 1em;}


#sidenav {


    }


#sidenav li {
display:inline;

}




#sidenav a:link{
    font-family: 'socialicoregular', Arial, sans-serif;
    font-size:5em;
    color: #eee;
    text-decoration:none;

    }
#sidenav a:visited{
        color: #fff;
        text-decoration:none;
}

#sidenav a:hover{
        color: #690000;
        text-decoration:none;
}

.miscellaneousRow {
    background-color: #000;
    width: 100%;
    height:100px;
        position:relative;
}

        .twitterFeed {float:left;
            padding-top: 10px;
                padding-bottom: 10px;
                width: 65.1%;
                                }

            .search {
                float: right;
                padding:2%;
                width: 26%;}






#mainNav {
float:right;
}

.sideDivider {
    background-color:#222;
    height:auto;
    margin-bottom:10%;
    padding-top:10%;
    padding-bottom:5%;
    padding-left:5%;
    padding-right:5%;
    }



.tabviewTABS {
    background-color:#222;
    height:auto;
    margin-bottom:20%;
    padding-top:10%;
    padding-bottom:5%;
    padding-left:5%;
    padding-right:5%;
    }


.sideBOX {
    background-color:#222;
    height:auto;
    margin-bottom:10%;
    padding-top:10%;
    padding-bottom:5%;
    padding-left:5%;
    padding-right:5%;
    text-align:center;
    }



.soundcloud {
    background-color:#222;
position:relative;
    height:auto;
        clear: both;
        padding:15px 0;
        min-width:100%;



    }


.soundcloudtitle {
font-family: 'Droid Serif', serif;
        color: #fff;
        font-size: 2em;
        text-align:right;
        text-transform: uppercase;
                margin-bottom: 1em;
            border-bottom: 5px solid #690000;


    }

.secondbottomfooterRight p{

    padding-right:3em;
    padding-bottom:1em;
    }

.hidden 
    {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);

}

Answer 1

您将topbarWRAPPER的左右位置设置为0px而不是5％。

请参阅this fiddle。

修改我明白你的意思了。我已更新the fiddle。它应该是你需要的。

编辑＃2： Alrighty。原谅我，我之前没有注意到这一点。您已为主体指定了宽度百分比，但最小和最大宽度（以像素为单位）。如果您删除最小和最大宽度，您将看到您正在寻找的行为，但我认为您应该做的是将70％的宽度分配给.wrap并给它一个margin:0 auto;

100％宽度标题用两个div固定

1 个答案: