html - 100% 宽度标题固定两个 div

标签 html css responsive-design

我正在尝试创建一个固定在滚动条顶部的标题。我有一个包装器 (#topbarwrapper)，它应该 100% 适合整个浏览器。我在 (#topbarwrapper) 中还有另一个 div 包装器 (.topbarcontentWRAPPER)，其中包括 Logo 和导航 (#mainNav)。一个向左漂浮，一个向右漂浮。它们都按应有的方式 float ，但似乎在调整浏览器大小时，div 会移动。我希望 float 在里面的两个 div 以整个页面为中心。布局是响应式的，因此主体宽度为 90%。我花了几天时间试图弄清楚这一点，包括研究。任何帮助将不胜感激。

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

布局 View : 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);

最佳答案

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

参见 this fiddle .

编辑: 我明白你的意思了。我更新了the fiddle .它应该是您需要的。

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

关于html - 100% 宽度标题固定两个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22293101/

上一篇：html - WordPress 帖子重叠

下一篇：html表格滚动颜色

相关文章：

html - 如何在 IE 7 的表格单元格内的 div 中右对齐工作？

html - Accordion - 一个嵌套在一些 div 中的面板

html - 如何将 Canvas 重叠在 table 上

javascript - 从悬停到点击的下拉菜单

c++ - Qt 获取标签以保持底部的一定百分比

html - 仅通过 CSS 在视觉上重新格式化表格行

html - 不居中的响应式网页设计

html - Bootstrap 缩略图未出现在中间

html - CSS 帮助 : One div refuses to behave like the other div

css - 更改行的基础/Bootstrap 部分的 div 顺序

©2024 IT工具网  联系我们