動態div高度始終爲100％

如何讓div始終填充垂直空間的100％？我有this Fiddle，它顯示了我如何使用jQuery完成它，但可以使用CSS完成嗎？動態div高度始終爲100％

var height = $('.content').height(); 
$('.sidebar').height(height);

PS，我們不能把一個高度的容器上，因爲我們顯然需要側邊欄的高度成長作爲內容填充。內容區域。

來源

2014-09-18 BenRacicot

你的小提琴沒有按」工作，所以我不知道你想要什麼。 100％的*空間是多少？ – 2014-09-18 21:14:57

jQuery沒有加載小提琴，我的道歉。現在檢查。此外，評論的jQuery與這個問題沒有關係。如何用CSS做到這一點。 – BenRacicot 2014-09-19 02:08:27

好，根據你的小提琴，這將是足夠用的700像素的固定高度設置爲那些.sidebar和.content div的，我以爲是不是你要找什麼，所以在這裏你用你有一個自適應解決方案HTML標記具有完全不同的CSS：

.wrapper { 
    height:100%; 
    overflow:hidden; 
    width:700px; 
} 
.sidebar { 
    background: grey; 
    float:left; 
    width: 200px; 
    padding-bottom:5000px; 
    margin-bottom:-5000px; 
} 
.content { 
    background: #AEAEAE; 
    position:relative; 
    float:right; 
    width:500px; 
    padding-bottom:5000px; 
    margin-bottom:-5000px; 
} 
footer { 
    clear:both; 
    float:none; 
    background: yellow; 
    display:block; 
    height:30px; 
    position:relative; 
}

該解決方案將接受任何高度，既.sidebar和.content將採取取其達到相同的高度列布局的最大DIV的高度。但是，如果你覺得你需要一些高度兩個div的，你也可以這樣做：

.sidebar, .content{min-height:700px;} /* or whatever */

See fiddle和玩，看看它是如何工作

來源

2014-09-18 21:13:35 Devin

哇@Fabio！我將永遠不會想出這個。是否有任何警告？您應該撰寫完整的博客文章併發布回來。 – BenRacicot 2014-09-19 02:19:39

不，沒有，這是做這件事的方法之一，甚至不是唯一的方法，只是我傾向於使用最多的方法之一（我每天都這樣做） – Devin 2014-09-19 02:31:14

如果您有5000px HEIGHT側欄，那麼添加一個填充底部：10000px和margin-bottom：-10000px。重要的部分是使用填充底部和邊距底部的巨大值，其中margin-bottom是填充底部的確切負數 – Devin 2014-09-19 20:11:43

嘗試使用：

html, body, .wrapper, .sidebar { height: 100%; }

外部包裝必須被太定義。

來源

2014-09-18 20:59:19

'body {height：100％}'是不好的習慣。 – hellaminx 2014-09-18 21:08:00

@scheisse_minelli有時不可避免。有任何消息來源來支持「不良做法」聲明？ – 2014-09-18 21:15:26

這只是我的看法。我沒有試圖辯論。 – hellaminx 2014-09-18 21:17:31

你的主要觀點是有背景在擴大整個高度對嗎？你不關心旁邊元素的「實際」高度，是嗎？

在這種情況下，你可以做什麼，我在這fiddle update of yours那樣：

裹一旁，邊欄在<div class="main">。由於div始終擴展到最大的孩子身高，無論視口如何，它的高度都是自動的整個高度。現在添加下面的CSS來創建具有整個展開高度和顏色的旁邊盒子後面的僞裝。瞧，你有你的整個高度背景：

.main { 
    position: relative; 
} 
.main:after { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 300px; 
    background: gray; 
    content: ""; 
    z-index: -1; 
}

來源

2014-09-19 15:10:35 techCreationist

不錯@TC我將在稍後給這個練習並且讓你回到你身邊這裏。 – BenRacicot 2014-09-19 17:57:40

我真的晚了，但我有這個問題幾次，我覺得在這種情況下，display: table-cell;真正的亮點：http://jsfiddle.net/yw6w562e/2/

再加上它也真的很容易重新調整它們在較小尺寸的瀏覽器與

display: table-header-group; 和 display: table-footer-group;（見小提琴媒體查詢）

來源

2015-04-01 14:07:50 Zubex

動態div高度始終爲100％

回答

相關問題