頁腳不同部分高度

-1

所以我正在做這個項目，我卡在頁腳。我遇到了這個問題，即頁腳的第二部分變大並且脫離頁腳。另一件事是當我做浮動：左;在頁腳的第三部分，頁腳的背景消失。所以我的問題是，我如何在頁腳中包含所有內容。這是codepen - https://codepen.io/anon/pen/gxjbyg。頁腳不同部分高度

如果我這樣做：

footer { 
background: rgba(0,0,0,0.15); 
clear: both; 
position:absolute; 
width:100%; 
bottom:0; 
}

它還挺得到固定，但是，我不知道是否有另一種方式，而不是使用絕對定位。

來源

2017-08-24 Benas Lengvinas

這就是你期望的？

footer { 
background: rgba(0,0,0,0.15); 
clear: both; 
display: table; 
width: 100%; 
}

來源

2017-08-24 13:33:54 nersoh

是的。也許你或者某個人可以解釋爲什麼沒有這個修復，頁腳沒有全高下去？此外，我試圖讓它顯示：塊;它也起作用。 –

@BenasLengvinas頁腳不能全高，因爲你的內容是浮動內容。如果你不設置'display：table'來包裝所有內容或者在頁腳中添加一個clearfix，它不會考慮浮動元素來設置它的高度。 – nersoh

您可以使用clearfix css技巧來修復具有浮動子元素的父容器的高度。在代碼中發佈的代碼中，您想要做的事情是讓#left，#center和#right元素向左浮動，然後將clearfix類應用於作爲這三個浮動元素的父元素的頁腳元素。下面是如何將看起來像在代碼示例代碼：

<html> 
<head> 
    <style> 
     .clearfix:after{ 
      content: ""; 
      display: table; 
      clear: both; 
     } 
     #left, #center, #right{ 
      float:left; 
     } 
    </style> 
</head> 
<body> 
<footer class="clearfix"> 
    <div id="left"></div> 
    <div id="center"></div> 
    <div id="right"></div> 
</footer>

來源

2017-08-24 13:39:11

我看到@nersoh解決方案獲得與您的解決方案相同的結果，您認爲哪種解決方案更好？ –

它基本上是一樣的東西，但我會推薦我的解決方案，因爲它遵循可重用性和單一職責的清潔編碼實踐。這意味着我們的.clearfix類只負責在某個元素具有浮動子元素時「修復」佈局，並且除了應用於相同元素的其他css類以適用於不同樣式之外，還可以輕鬆地將其重用於任何需要它的其他元素目的。 –

如果您有興趣如何在.clearfix解決方案過去發展演變，請點擊以下鏈接：https://css-tricks.com/snippets/css/clear-fix/ –

在我看來，你的問題是，你有#top和#bottom均設定爲50％，與另外一個高度每個填充20px。如果你看看你的重疊，它是40px。

要解決這個問題，請將您的身高設置爲45％和填充5％。這可能會實現你正在尋找的行爲。

來源

2017-08-24 13:46:10 Josh

頁腳不同部分高度

回答

相關問題