子div的寬度超出父div的寬度

子元素的寬度超過了其父div的寬度。我認爲這一定是因爲我設定了固定的位置而引起的，但我不知道要用什麼來替代它。這個div是一個應該固定在窗口頂部的導航欄。當我擺脫位置：固定，大小適合父母的div很好。但是，導航欄不再固定在頂部。我該如何解決這個問題？子div的寬度超出父div的寬度

參考：page

CSS：

.fixed_pos { 
    position: fixed; 
}

查看：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span11 fixed_pos"> 
     <ul class="nav nav-tabs"> 
     </ul> 
     </div> 
    </div> 
</div>

非常感謝提前！

來源

2012-12-28 Maximus S

就必須加入所有的CSS屬性爲這些div所以我們可以看到這個問題可能是什麼。 –

對於一個固定的導航，你通常需要它在最外層或它自己的絕對div。這非常簡單。這是一個小提琴讓你看和調整。仍然不確定你真的想用所有這些div做什麼，但這是一個可以很容易調整的基本設置。

http://jsfiddle.net/hakarune/FMmEc/

的HTML：

<div id="wrap"> 
<nav> 
<li><a href="#">About Us</a></li> 
<li><a href="#">Our Products</a></li> 
<li><a href="#">FAQs</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Login</a></li> 
</nav> 

    <div id="header"> 
     <h1>CSS Newbie: Super Simple Horizontal Navigation Bar</h1> 
    </div> 

    <div id="content"> 
     <p> Basic Fixed Nav at Top</p> 

    </div> 
</div>

的CSS

nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 15px 0; 
    padding: 0px; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    position:fixed; 
    top:0px; 
} 
nav li {float: left; } 
nav li a { 
    display: block; 
     padding: 8px 15px; 
     text-decoration: none; 
     font-weight: bold; 
     color: #069; 
     border-right: 1px solid #ccc; } 
nav li a:hover { 
     color: #c00; 
     background-color: #fff; } 
    /* End navigation bar styling. */ 

    /* This is just styling for this specific page. */ 
body { 
     background-color: #555; 
     font: small/1.3 Arial, Helvetica, sans-serif; } 
#wrap { 
     width: 750px; 
     margin: 0 auto; 
     background-color: #fff; } 
h1 { 
     font-size: 1.5em; 
     padding: 1em 8px; 
     color: #333; 
     background-color: #069; 
     margin: 30px auto 0; 
} 
#content { 
     padding: 0 50px 50px; }

來源

2012-12-28 07:33:30 hakarune

這是最接近正確的答案。請參閱http://stackoverflow.com/questions/9350818/fixed-sidebar-navigation-in-fluid-twitter-bootstrap-2-0 –

我檢查了您的參考頁面，它看起來像是在完美工作，至少在我的結尾。除非您將瀏覽器的大小調整到800以下......這是您想要的嗎？您的導航欄不會在較小的窗口大小中消失？（此按鈕也消失了......） – hakarune

我編輯了小提琴以反映動態的流體風格。添加'min-width：300px;'它阻止它的大小小於導航欄所需的長度。 – hakarune

固定位置元素相對於視口而不是它們的包含元素（details）。以下可能的工作：

<body> 

    <!-- the stuff you have up here... --> 

    <div class="container-fluid" 
     style=" 
      position: fixed; 
      left: 0; 
      right: 0; 
      padding-right: inherit; 
      padding-left: inherit;"> 

     <div class="row-fluid" id="menus-desktop"><!-- MENUS DESKTOP --> 

      <!-- set to span12 and removed fixed_pos class --> 
      <div class="span12" style="position: relative;"> 
       <!-- ul, etc... --> 
      </div> 
     </div> 
    </div> 

    <!-- the previous container but without the nav stuff --> 

</body>

我感動的導航元素融入到自己固定的容器，這是body的直接子與它的填充，以inherit所以它會適應任何你的身上。然後，先前固定的<span>元素不應該再固定，並且設置爲span12，因此它具有正確的寬度。

來源

2012-12-28 06:52:33 tiffon

我正在嘗試使我的導航寬度完美適合行流體寬度。我認爲設置位置：固定到任何流體元素縮小其寬度，以適應裏面的內容... –

子div的寬度超出父div的寬度

回答

相關問題