CSS3：另一個未知高度的盒子，高度爲100％的高度爲

在我的網站上，有一個全屏background-image（所以它從底部到頂部，從一個站點到另一個）。這個圖像應該是可見的所有的時間，也不會被除圖像之外的任何元件等CSS3：另一個未知高度的盒子，高度爲100％的高度爲

被隱藏我有三個主要部分：

部首
內容
頁腳（固定）

他們有一個透明的背景，所以我的頁面背景是可見的，通過他們所有人。頁眉和頁腳具有相同的顏色（較暗的一種），並且內容區域較淺。

頁眉和內容包裝在<div>元素中，頁腳位於HTML5的<footer>元素中。我使用了一個固定位置的頁腳，而我的頁眉和內容區域的高度是不確定的。

我希望Content-Area使用Header和Footer之間的全高。有沒有人有任何建議如何實現這一目標？

代碼：

* { margin: 0; padding: 0; } 
 
html, body { 
 
\t background-color: yellow; 
 
\t height: 100%; 
 
} 
 

 
#page_wrap { 
 
\t min-height: 100%; 
 
\t margin-bottom: -3em; /* footer height */ 
 
} 
 
footer { 
 
\t background-color:rgba(0, 0, 0, 0.4); 
 
\t line-height: 3em; 
 
} 
 

 
#head_nav { 
 
\t background-color:rgba(0, 0, 0, 0.4); 
 
} 
 

 
#content { 
 
\t background-color: rgba(255, 255, 255, 0.9); 
 
}

<body> 
 
\t <div id="page_wrap"> 
 
\t \t <div id="head_nav"> 
 
\t \t \t <p>Navigation</p> 
 
\t \t \t <a href="/">Home</a> 
 
\t \t </div> 
 
\t \t <div id="content"> 
 
\t \t \t <p>The page content</p> 
 
\t \t </div> 
 
\t </div> 
 
\t <footer> 
 
\t \t <p>Footertext</p> 
 
\t </footer> 
 
</body>

來源

2016-03-03 marrem97

問題尋求幫助調試（「？爲什麼不是這個代碼工作」）必須包括所需行爲，特定問題或錯誤以及在問題本身中重現問題所需的最短代碼。沒有明確問題陳述的問題對其他讀者無益。請參閱：[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 –

您可以使用DIV這樣：

CSS：

* { margin: 0; padding: 0; } 
html, body { 
    background-color: yellow; 
} 

#page_wrap { 
    height: 100%; 
} 
footer { 
    background-color:rgba(0, 0, 0, 0.4); 
    height: 50px; 
} 

#head_nav { 
    height: 50px; 
    background-color:rgba(0, 0, 0, 0.4); 
} 

#content { 
    min-height: calc(100vh - 100px); 
    background-color: rgba(255, 255, 255, 0.9); 
}

小提琴：https://jsfiddle.net/j5u5pLvq/1/

來源

2016-03-03 13:09:01 DebRaj

但有了這個解決方案，用戶**總是**必須滾動才能看到頁腳。我想要的是用戶只需滾動，當內容非常多時，頁腳就會被放在下面。當內容不多時，頁腳應該在窗口結束的位置結束，因此它是_directly_可見的。 – marrem97

這是你在找什麼？ https://jsfiddle.net/j5u5pLvq/1/ – DebRaj

是的，但標題現在也有一個固定的高度。但無論如何，我會用它，謝謝！ – marrem97

解決方法很簡單考慮，當你還沒有提到的是，高度是頁腳未知頁腳的高度是衆所周知的你。

因此，這裏是你需要做什麼：

<html> 
<head> 
    <title>test</title> 
    <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css"> 
    <style> 
     body{ font-size: 14px; font-family: verdana;} 
     .container{ position: absolute; left: 0; right: 0; top: 0; bottom: 100px; } 
     table{width: 100%;height: 100%;} 
     .content{background-color: #E4FFF0;height: 100%;} 
     footer{height: 100px;position: absolute; bottom: 0px; width: 100%; background-color: #aaa;} 
    </style> 
</head> 
<body> 
    <!-- Container, it will have your header and content area --> 
<div class="container"> 
    <!-- we need to include table to solve the variable header hight issue --> 
    <table border="0" cell-spacing="0" cell-padding="0"> 
     <tr> 
      <td class="header"> 
       <!-- header --> 
       <header>header<br>header<br>header<br>header<br>header<br>header<br>header</header> 
      </td> 
     </tr> 
     <tr> 
      <td class="content"> 
       <!-- content --> 
       <section>content</section> 
      </td> 
     </tr> 
    </table> 
</div> 
<footer>Footer Content</footer> 
</body> 
</html>

上面的代碼片段具有可變報頭，完整的頁面高度（預計頁腳的高度）和固定頁腳的內容區域。

來源

2016-03-03 13:01:37

好的，這是工作，所以我會用它來知道。但有沒有辦法做到這一點，而不使用表？ – marrem97

看起來像值得關注的東西，但

標籤很長時間以來就不贊成用於佈局目的。這可能是一個適合flex解決方案的時間:) – markoffden

yup，'table'標籤幾乎不贊成用於佈局，但是這段代碼與「Flex Box」無關，它在I.E /在舊版瀏覽器中不完全支持。 –

相關問題

CSS3：另一個未知高度的盒子，高度爲100％的高度爲

回答

相關問題