頁腳太寬

我正在嘗試添加頁腳到網頁，但遇到了一些尺寸問題，我希望有人可以闡明一些原因。代碼如下所示：頁腳太寬

<!DOCTYPE html> 
<html lang="en-CA"> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title> 
    Home 
    </title> 
</head> 
<body> 
    <div class="header"> 
     <a href="index.html" style="text-decoration: none"> 
     <img class="logo" src="logo.png" alt="logo_text"> 
     </a> 
     <span class="tabs"> 
     <a class="link" href="page1.html">Tab1</a> 
     <a class="link" href="page2.html">Tab2</a> 
     <a class="link" href="page3.html">Tab3</a> 
     <a class="link" href="page4.html">Tab4</a> 
     </span> 
     <img id="combologo" src="combo.png" alt="combologo_text" align="right"> 
    </div> 
    <div id="scrollarea"> 
     <marquee class="scroller" scrollamount="15"> 
     <span id="scrolltext1"> 
     Text 
     </span> 
     <span id="scrolltext2"> 
     Text 
     </span> 
     <span id="scrolltext3"> 
     Text 
     </span> 
     </marquee><br> 
    </div> 
    <div class="contentleft"> 
     <h2 class="pagetitle"> 
     This is the header 
     </h2> 
     <p> 
     Body Text<br><br> 
     Body Text<br><br> 
     Body Text 
     </p> 
    </div> 
    <div class="footer"> 
     <img class="bottomlogo" src="logo.png" alt="bottomlogo_text" align="right">   
     <br><br>2016<br> 
     This Website Is Still Under Construction - Coming Soon! 
    </div> 
</body>

相應的樣式表看起來是這樣的：

html { 
    height: 100%; 
    width: 100% 
} 

body { 
    margin: 0; 
    font-family: rexlia; 
    font-size: 1vw; 
    width: 100%; 
    height: 100%; 
    background: url(cubes.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

hr { 
    border-color: black; 
    background-color: black; 
    color: black; 
    margin: 0; 
} 

.logo { 
     width: 20%; 
     margin-top: 2%; 
     margin-left: 2%; 
     text-decoration: none; 
} 

.link { 
     margin-right: 3%; 
     color: black; 
     text-decoration: none; 
     background-color: transparent; 
} 

.link:hover { 
      color: white; 
      background-color: rgb(80,80,80); 
} 

.header { 
     font-style: italic; 
     background: rgb(80,80,80); 
     background: -webkit- linear-gradient(rgb(80,80,80), white); 
     background: -o-linear- linear-gradient(rgb(80,80,80), white); 
     background: -moz-linear- linear-gradient(rgb(80,80,80), white); 
     background: linear-gradient(rgb(80,80,80), white); 
     padding-bottom: 0.7%; 
} 

.scroller { 
      font-size: 2vw; 
      color: white; 
} 

#scrollarea { 
      background: rgb(80,80,80); 
      padding-top: 1%; 
      padding-bottom: 1%; 
      font-style: italic; 
} 

.pagetitle { 
      font-style: italic; 
} 

.contentleft { 
      padding-left: 2%; 
      padding-top: 1%; 
      float: left; 
      width: 45%; 
} 

.footer { 
     clear: both; 
     background: rgb(80,80,80); 
     background: -webkit- linear-gradient(white, rgb(80,80,80)); 
     background: -o-linear- linear-gradient(white, rgb(80,80,80)); 
     background: -moz-linear- linear-gradient(white, rgb(80,80,80)); 
     background: linear-gradient(white, rgb(80,80,80)); 
     text-align: right; 
     font-style: italic; 
     padding: 2%; 
     width: 100%; 
} 

.tabs { 
     margin-left: 3%; 
     color: black; 
} 

.bottomlogo { 
      width: 6%; 
} 

#combologo { 
      width: 13%; 
      margin-top: 1%; 
      margin-right: 2%; 
} 

#scrolltext1 { 
      margin-right: 100%; 
} 

#scrolltext2 { 
      margin-right: 100%; 
} 

#cubes { 
     width: 45%; 
}

我已經剝離下來，以簡化問題，但基本上這個問題我」 m有這樣的：標題，滾動條（選框）和身體都是相同的寬度。由於某種原因，頁腳比其他頁面寬。正如你可以看到HTML塊被設置爲1005，那麼主體被設置爲100％，所以腳本也設置爲100％，不應該是它的父元素（主體）的100％？如果我認爲100％是有效的，但我試圖弄清楚爲什麼它正在做它正在做的事情。對不起，我對HTML很陌生。

來源

2016-03-12 user3226170

將padding添加到100％定義的width引起的問題。你可以刪除width:100%，這是不需要的，無論如何divs覆蓋父母的100％。

如果要保留該寬度，則可以添加box-sizing CSS屬性以確保填充/邊框不會影響總寬度/高度計算。

footer { 
    box-sizing:border-box; 
}

例子：

footer { 
 
    padding:1em; 
 
    background:lightblue; 
 
    margin-bottom:1em; 
 
} 
 

 
footer:nth-of-type(1) { 
 
    width:100%; 
 
} 
 

 
footer:nth-of-type(2) { 
 
    width:100%; 
 
    box-sizing:border-box; 
 
}

<footer>footer with padding and 100% width</footer> 
 
<footer>footer with padding and 100% width and box-sizing</footer> 
 
<footer>footer with padding</footer>

來源

2016-03-12 17:01:01 Aziz

不填充隻影響頁腳雖然內部？它不應該仍然保持它的外部尺寸（在這種情況下，身體的寬度是100％）？ – user3226170

不，你會發現padding增加了內容之外但是在元素內部的空間，因此影響了它的尺寸。 100％的寬度和2％的填充會導致104％寬的div。 – Aziz

好的，這很好。我不認爲填充會調整元素的大小，只要填充內容不超過元素大小。這現在非常合理。謝謝。 – user3226170

回答

相關問題