CSS 100％寬度超過100％

我在學習CSS，我嘗試創建一個簡單的佈局。CSS 100％寬度超過100％

我設置了「標題」寬度爲100％，「左」寬度爲20％，「正確」爲80％。但標題的寬度大於左側和右側的總寬度。爲什麼是這樣以及如何解決它？

div { 
 
     border-radius: 10px; 
 
    } 
 
    
 
    #header { 
 
     z-index: 1; 
 
     background-color: #80B7ED; 
 
     height: 50px; 
 
    \t width: 100%; 
 
     position: fixed; 
 
    } 
 
    
 
    .left { 
 
     background-color: #5A9DE0; 
 
     height: 400px; 
 
     width: 20%; 
 
     float: left; 
 
     position: relative; 
 
    } 
 
    
 
    .right { 
 
     background-color: #BFD9F2; 
 
     height: 400px; 
 
     width: 80%; 
 
     float: right; 
 
     position: relative; 
 
    } 
 
    
 
    #footer { 
 
     background-color: #80B7ED; 
 
     clear: both; 
 
     height:70px; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    \t <head> 
 
    \t \t <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    \t \t <title></title> 
 
    \t </head> 
 
    \t <body> 
 
    \t  <div id="header"> 
 
    \t  </div> 
 
    \t  <div class="left"> 
 
    \t  </div> 
 
    \t  <div class="right"> 
 
    \t  </div> 
 
    \t  <div id="footer"> 
 
    \t  </div> 
 
     </body> 
 
    </html>

編輯

感謝您的答案和一些閱讀我現在的問題是主體部分的邊緣得到。當我使用body {margin：0;}時，「left」加上「right」在頁面中佔據更大的位置，「header」佔據更小的位置，所以它們的寬度相等。

具有相同結果的另一種解決方案是在「left：0; right：0; position：absolute;」周圍添加一個「container」div。

我明白爲什麼這些解決方案使「左」加「右」更大（因此他們佔據整個頁面），我沒有得到的是爲什麼「標題」突然變小。如果固定的「標題」不在正常流程中，爲什麼改變身體的邊緣會影響它？

body { 
 
    margin: 0; 
 
} 
 

 
div { 
 
    border-radius: 10px; 
 
} 
 

 
#header { 
 
    z-index: 1; 
 
    background-color: #80B7ED; 
 
    border-top-left-radius: 0; 
 
    border-top-right-radius: 0; 
 
    top: 0; 
 
    height: 50px; 
 
\t width: 100%; 
 
    position: fixed; 
 
} 
 

 
.left { 
 
    background-color: #5A9DE0; 
 
    height: 400px; 
 
    width: 20%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.right { 
 
    background-color: #BFD9F2; 
 
    height: 400px; 
 
    width: 80%; 
 
    float: right; 
 
    position: relative; 
 
} 
 

 
#footer { 
 
    background-color: #80B7ED; 
 
    clear: both; 
 
    height:70px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    <title></title> 
 
    </head> 
 
    <body> 
 
    <div id="header"> 
 
    </div> 
 
    <div class="left"> 
 
    </div> 
 
    <div class="right"> 
 
    </div> 
 
    <div id="footer"> 
 
    </div> 
 
    </body> 
 
</html>

由於

來源

2014-09-23 Ella Shar

邊距 - 默認情況下，這不包括在寬度計算中。例如一個盒子的全部寬度是leftmargin + leftpadding + box寬度+ rightpadding + rightmargin。 – 2014-09-23 19:41:45

@MarcB這裏沒有涉及利潤率？但的確，這也是一個經典 – 2014-09-23 19:44:19

總是有默認的邊距，除非你在某處使用CSS重置。 – 2014-09-23 19:47:37

在這裏你去：

body{ 
 
    margin:0px; 
 
} 
 
div { 
 
    border-radius: 10px; 
 
} 
 
#wrapper { 
 
    padding: 0%; 
 
} 
 
#wrap { 
 
    float: left; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
#header { 
 
    position:fixed; 
 
    width:inherit; 
 
    z-index:1; 
 
    padding:0px; 
 
    height:50px; 
 
    border-radius:10px; 
 
    background-color: #80B7ED; 
 
} 
 
.left { 
 
    background-color: #5A9DE0; 
 
    height: 400px; 
 
    width: 20%; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.right { 
 
    background-color: #BFD9F2; 
 
    height: 400px; 
 
    width: 80%; 
 
    float: right; 
 
    position: relative; 
 
} 
 
#footer { 
 
    background-color: #80B7ED; 
 
    clear: both; 
 
    height:70px; 
 
}

<html> 
 
<body> 
 
<div id="wrapper"> 
 
    <div id="wrap"> 
 
     <div id="header"></div> 
 
    </div> 
 
</div> 
 
<div class="left"></div> 
 
<div class="right"></div> 
 
<div id="footer"></div> 
 
</body> 
 
</html>

看到這裏jsfiddle

編輯：

如果你想添加一個保證金，我建議你添加一個可變保證金，例如2％或3％，然後從左欄，右欄或兩者中減去該數量。然後，您將#wrapp的寬度設置爲100-2 * x％，其中x是您添加的保證金數量。

來源

2014-09-23 20:16:35 tfrascaroli

哎呀....只是意識到它適用於jsfiddle，但不在這裏。我會進一步調查。 – tfrascaroli 2014-09-23 20:30:35

在我的瀏覽器中無法正常工作（firefox）..謝謝 – 2014-09-23 22:02:17

我不知道它爲什麼在jsfiddle中工作，但我會繼續調查。 – tfrascaroli 2014-09-25 18:26:47

當使用百分比寬度的margin，padding和border不包括在計算中。所以你要確保所有這些在相應的元素上都設置爲0。

margin: 0; 
padding: 0; 
border: none;

或者，你可以使用box-sizing屬性，這將使計算包括padding和border。那麼你只需要考慮其他地方的利潤率。

box-sizing: border-box;

來源

2014-09-23 19:46:19 Jmh2013

不是他在問什麼。他在他的CSS中沒有邊界，填充或邊界。看到這裏http://jsfiddle.net/u3r2bm47/ – tfrascaroli 2014-09-23 19:55:48

這是行不通的。這兩種方式:( – 2014-09-23 20:25:35

我想要的位置是固定的，所以當頁面滾動時頭部仍然存在） – 2014-09-23 22:06:35

另一種方法是對父div使用overflow: hidden;，對子元素設置width:100%;。這樣，更多寬度將被隱藏。

來源

2018-02-14 19:45:30

CSS 100％寬度超過100％

回答

相關問題