填充導航欄使它溢出頁面，內部容器與邊距/填充不起作用要麼

所以我從頭開始一個新的網站，我已經卡在導航欄上。我有這個簡單的HTML：填充導航欄使它溢出頁面，內部容器與邊距/填充不起作用要麼

<div class="navbar"> 
    <div class="page-title">SkillUp</div> 
</div> 

<div class="container"> 

    <!-- PAGE CONTENT INJECTED HERE --> 
    <div ng-view></div> 

</div>

我的CSS是：

html, body{ 
    margin: 0; 
    padding: 0; 
} 

.navbar{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: #197719; 
    width: 100%; 
    height: 80px; 
    z-index: 100; 
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.4); 
    padding: 0 15px; 
} 

.page-title{ 
    position: relative; 
    top: 2px; 
    color: white; 
    font-family: Lobster, cursive; 
    font-size: 54px; 
    text-shadow: -3px 3px 5px rgba(0, 0, 0, 0.6); 
    text-align: center; 
}

簡單。但是，添加填充時，導航欄水平延伸通過填充時間2的大小。我嘗試了將body和html寬度設置爲100％，將另一個div放入導航欄並設置其寬度到100％，並添加填充，但這也使得外部導航欄更大！它只在我從導航欄中刪除填充時起作用，但我沒有遇到與我製作的其他網站有關的問題！我不希望利潤率的內部因素，它的工作。

這裏發生了什麼圖片：

Annoying navbar

幫助，請！謝謝！

來源

2016-06-24 Onur Fesci

嘗試刪除'width：100％'並改爲使用'top：0;左：0;正確：0'，所以導航欄將自己擴展到100％ – shall

@shall那也行得通！那麼你們是否認爲這樣做更好，或者是盒子大小：邊框？在兼容性或其他方面。 –

我相信沒有區別，箱子大小是完全兼容的，請查看[這裏]（http://caniuse.com/#feat=css3-boxsizing） – shall

添加

box-sizing: border-box;

到.navbar選擇。

來源

2016-06-24 12:27:17 DominikD

不知道那個伎倆。我會在一個全寬度的容器裏面嵌套一個flexbox ......不錯的一個 – Carele

@GolezTrol沒有人，用你的解決方案，標題不佔用所有的空間...... – Carele

我愛你。但是，這可能會導致舊版瀏覽器出現問題嗎？ –

填充導航欄使它溢出頁面，內部容器與邊距/填充不起作用要麼

回答

相關問題