CSS高度工作，但最小高度不起作用

我有一個奇怪的相當奇怪的問題。問題是一個小問題，我想將最小高度設置爲100％，即頁面的內容應跨越用戶的整個屏幕，並且如果內容超過100％，頁面應儘可能延伸。一個簡單的方法是設置最小高度：100％，並設置高度：自動，這正是我想要的，但無論我嘗試多少次，問題仍然存在。CSS高度工作，但最小高度不起作用

我在所有元素上使用高度自動和最小高度：100％，但不起作用。如果我刪除最小高度僅包含高度：100％，那麼它就像魅力一樣，但當內容較大時，它會溢出整個頁腳。

請幫我在這裏是CSS：

html, body, container, row, col-lg-3, col-lg-9 { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
} 
.container { 
    max-width: 1170px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
} 
.col-lg-3 { 
    min-height:100%; 
    height:100%; 
} 
.col-lg-9 { 
    min-height: 100%; 
    height: 100%; 
}

下面是該問題的網頁： http://contestlancer.com/ai/GP/

來源

2013-07-31 Ahmar Ali

你能告訴我們你的HTML .. –

@Kaushik我在Twitter引導中使用列我已經在帖子中發佈了鏈接。把代碼放在這裏需要太多的空間，請看看 –

所以你想要左邊的菜單內容用藍色背景來覆蓋整個頁面？ –

是的，這是一個痛苦但它是如何工作。身高可以從定位的父母身上繼承，但當這些身高有min-height屬性時，身高可以繼承。

孩子有一個min-height設置爲100%不能繼承經百分比父母的身高元素...

https://stackoverflow.com/a/8468131/1491212

CSS2.1規格：

的比例相對於計算到生成的框的包含區塊的高度爲。如果包含塊的高度沒有明確指定（即，它取決於內容高度），並且該元素沒有被絕對定位，則值計算爲'auto'。

使用容器的position: relative; height: 100%解決問題，並將min-height: 100%;添加到最深的孩子。

來源

2013-07-31 11:31:53

謝謝你的回答，但我並不真的知道你是什麼意思？所以我保持原來的CSS，但相對於每個容器添加位置？ –

這不工作的兄弟...位置不會影響到這裏div –

@AhmarAli是的，這就是我的意思，但我沒有一個全面的答案你...我通常做的是設置最小高度： 100％最深的孩子和身高：100％;位置：相對;在容器上 –

CSS高度工作，但最小高度不起作用

回答

相關問題