Div不會繼承父元素的高度

我不能爲我的生活弄清楚這一點。我試圖使用div來給我的頁面的內容半透明的背景。問題是div只能在內容上下降。不管內容如何，我都希望不透明的背景一直貫穿到頁腳。我所指的頁面位於此處。 www.codykrauskopf.com/circus（這是我上傳的唯一頁面）我正在修改網站以響應瀏覽器大小，因此不允許修復任何寬度或高度。Div不會繼承父元素的高度

CSS：

html, body { 
    height: 100vh; 
    margin:0; 
    padding:0; 
    overflow:auto; 
} 

#circusContent { 
    margin-left:100px; 
    height:100%; 
} 

p { 
    font-family:georgia; 
} 

div.topButtons { 
    display:inline-block; 
    margin-top:15px; 
    line-height:50px; 
    text-align:center; 
    vertical-align:middle; 
    width:130px; 
    background: rgb(166, 166, 166); /* The Fallback */ 
    background: rgba(166, 166, 166, .5); 
} 

#leftTopButton { 
    margin-left:75px; 
} 

a.forms { 
    text-decoration:underline; 
} 

div.topButtons:hover { 
    background: rgb(100, 0, 0); /* The Fallback */ 
    background: rgba(0, 0, 0, 1); 
} 

#circusParagraph{ 
    color:white; 
    font-size:14px; 
    text-align:center; 
    margin-left:125px; 
    margin-top:25px; 
} 

#wrap {min-height: 100vh; 
width:99.99999999999%;}

來源

2014-03-02 Cody Krauskopf

打開調試器的東西像鉻，檢查元素，看看有什麼重寫它。 – MightySchmoePong

我沒有看到#wrap div的CSS。這是下到你的頁腳的div。 – bart2puck

我一定是在事故中遺漏了它，但它絕對是在文件中。 #wrap {min-height：100vh; width：99.99999999999％;} 我試圖刪除其他頁面上使用的多餘東西。 –

將circusContent的高度設置爲100％，但它必須是其父項的100％，因此父項也必須設置爲100％但是100％這將是「包裹」，因此將其高度設置爲100％，這將是其父母身高的高度。

#main, 
#wrap, 
#content, 
#circusContent { 
    height:100%; 
}

刪除這些元素的其他高度。

現在，我看到你試圖使用新的視口屬性vh，如果你仍然想這樣做，我將不得不考慮內部元素。

來源

2014-03-02 21:39:08 Rob

這固定了主要和包裝的高度，但不透明的背景仍然不會延伸到頁面的底部。 –

@CodyKrauskopf對不起，您還需要將高度添加到#main。刪除100vh的最小高度 – Rob

更改此項後，頁腳現在位於內容的底部，但實際上將其置於瀏覽器屏幕的中間，背景向下延伸通過頁腳。 –

在你的CSS你有一個錯字。

#wrap { 
    min-height: 100vh; <--- should be 100%

也有另一種錯字

html, body { 
    height: 100vh; <--- should be 100% 
    margin:0; 
    padding:0; 
    overflow:auto; 
}

在調試器中，我改變了上面的CSS錯別字，它固定您的問題。

來源

2014-03-02 21:17:57 Vector

我試圖從這個頁面http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window 我也試過100％，它似乎並沒有工作。 –

作爲測試，設置min-height：1000px;只是爲了看看這是否解決了它。沒有我在哪裏可以看到你設置頁面高度的位置，所以它會去做100％的自動大小的div，這隻會是它內容的長度。 – bart2puck

我只能通過明確地設置內容div的高度（這是背景的高度）來獲得它。爲換行設置min-height：1000px不會更改主要內容或內容的大小。即使我爲#main放置了min-height：1000px，也沒有改變內容的高度。 –

Div不會繼承父元素的高度

回答

相關問題