爲什麼我的頁腳如此之大？

我的頁腳比它應該是大得多（通常只是它內部的文本大小相同），我無法弄清楚爲什麼，我沒有添加任何代碼來更改默認大小。爲什麼我的頁腳如此之大？

這裏是頁面的HTML

<header></header> 
<nav></nav> 

<div class="reservations"></div> 

<table style="width:100%" class="schedule"></table> 

<div class="sections"> 
    <section class="inner"></section> 
    <section class="right"></section> 

    <div class="capacity"> 
     <table class="capacity"></table> 
    </div> 
</div> 

<footer>Hamilton Confrence Center || 8711 West Lane, Hamilton || (513) 555-7911</footer>

的基本佈局，這是所有我頁腳的CSS裏面

footer { 
    text-align: center; 
    background-color: aquamarine; 
    color: white; 
}

然而，這是什麼該頁面目前看起來像（如果它很難看到，已經圈出了頁腳文本）..

正如你所看到的，頁腳背景色遠高於頁腳文本的頂部延伸。對於那些會問你的人，不，我也沒有將頁腳上方的部分背景顏色更改爲海藍寶石，它們只是默認的，例如白色。

編輯：

加入clear: both;在CSS頁腳解決了該問題，從您的提琴

來源

2016-08-22 oneman

您可以創建一個小提琴複製問題的問題？ –

錯誤不能從您發佈的代碼重現（[demo]（https://jsfiddle.net/yaxnnzma/））。我猜測有些浮點數沒有被清除，但是我們沒有權限訪問那些有問題的代碼。 –

用chrome打開頁面。檢查頁腳。驗證它的邊界框確實覆蓋了頁面，並且它的計算樣式如預期的那樣。檢查頁面的其餘部分。檢查計算出的CSS背景顏色。如果是海藍寶石檢查，看看計算值來自哪裏。檢查其他元素邊界框，浮動樣式等。您也可以在Firefox中執行類似的調試。這應該給你提示。 –

更改

footer { 
    text-align: center; 
    background-color: aquamarine; 
    color: white; }

要

footer { 
    text-align: center; 
    background-color: aquamarine; 
    color: white; 
    clear: both; 
}

擁有固定資產

來源

2016-08-22 08:11:26 oneman

嘿@ Liam-emery，很高興看到你的問題修復！ StackOverflow採用Q＆A風格，可以接受來自某人的正確答案。回答你自己的問題沒有問題，但請接受答案，並在幫助你找到解決方案時加以讚揚，這會讓他們獲得一些「聲望」 - 獎勵幫助網站上其他人的點數 – Kimmax

@Kimmax此答案對如果我的答案是你所指的，那麼我的其他人就是我。這應該是公認的。 –

您的預訂div有浮動：正確的。在頁腳之前清除浮動。對不起，在電話上簡短。

來源

2016-08-22 08:08:51

爲什麼我的頁腳如此之大？

回答

相關問題