調整身高以適應屏幕，即使內容更短？

-1

不知道如何去做這件事。基本上，我的頁面有一個包含在包裝中的標題，導航，正文和頁腳，所有這些都包含在正文中（當然）。包裝被設置爲填充屏幕的60％並居中。標題，導航和頁腳永遠是相同的高度，並簡單地填充包裝，寬度。調整身高以適應屏幕，即使內容更短？

然而，主要部分具有可變長度的內容（段落，圖像，文章，部分等）。如果我在主要部分中有很多內容，頁面會填滿，伸展並像平常一樣滾動。但是，如果我的主要內容只有一點點，頁面不夠長，頁腳會在屏幕的一半左右結束（或者在主界面之後需要更高的頁面）。

我想要做的是確保身體和/或包裝伸展以填充屏幕的高度，即使主要部分不一定足夠長以迫使它變得高度。我已經試過製作身體和包裝height: 100%但包裝仍未延伸。如果我將頁腳設置爲position: fixed，則頁腳大小會偏差，並且包裝器邊界不會向下延伸。

鑑於這些問題，我認爲最好的解決辦法是以某種方式增加主節的高度，使它和其他元素始終加起來至少爲100％，但我無法弄清楚如何做到這一點。這一直困擾我一個星期，所以任何幫助將不勝感激！

來源

2015-02-09 POWERTRON_009

你可以創建一個jsfiddle來展示你的問題？ – Timmerz 2015-02-09 05:04:12

你可以設置一個最小高度爲CSS – anpsmn 2015-02-09 06:39:42

Timmerz的內容，這裏有一個JSFiddle鏈接給你：http://jsfiddle.net/378feuLu/ Anpsmn，在主要部分設置最小高度並不能解決問題。 – 2015-02-10 03:51:15

這可能工作。它只是設計你的身體標記，你的包裝和HTML來填充容器的高度。

html, body, #wrapper { 
    height: 100%; 
}

我不認爲我可以比沒有簡化版本的HTML/CSS更具體。

- 編輯 -

我從一個工作示例分叉您JSFiddle。我所做的只是將上面的代碼片段添加到CSS中。

來源

2015-02-09 05:01:08 Eclecticist

不幸的是，將高度設置爲100％並不會使div伸展超出內容的高度。它使html和body擴展爲匹配屏幕高度，但不是div或其內容。查看此JSFiddle瞭解更多信息：http://jsfiddle.net/378feuLu/ – 2015-02-10 03:55:14

我添加了一個使用我的代碼片段的例子。有用：） – Eclecticist 2015-02-10 12:28:31

作爲折衷主義者已經說過。你需要將你的html和body設置爲100％的高度。這是必要的，因爲wrapper元素繼承父級的高度。因此，將包裝設置爲100％ - 高度永遠不會大於它的父級。除了Eclecticists回答我建議你設置最小高度到100％這樣的內容不會從容器中儘快運行作爲包裝超過了窗口高度：

html, body { 
    height: 100%; 
} 
#wrapper { 
    min-height: 100%; 
}

來源

2015-02-12 17:13:32

調整身高以適應屏幕，即使內容更短？

回答

相關問題