如何製作CSS高度：100％在不同高度的容器中生效？

我的HTML有2個div的外格內：如何製作CSS高度：100％在不同高度的容器中生效？

<div class="outer"> 
    <div class="col-left"> 
     <p>Lorem Ipsum is simply dummy text of the... 
    </div> 

    <div class="col-right">Right</div> 

    <div class="clear"></div> 
</div>

的CSS是：

.outer { 
    border: 1px solid black; 
} 

.col-left { 
    float: left; 
    background: cyan; 
    width: 80% 
    height: 100%; 
} 

.col-right { 
    float: left; 
    width: 15%; 
    background: yellow; 
    height: 100%; 
} 

.clear { 
    clear: both; 
}

高度：100％才能生效，如果我設定一個像素高度的.outer類，然而，我有一個高度不應該固定的情況。

如何在不指定父母高度的情況下使用身高100％？

我打算用萊恩在評論中寫的。

來源

2013-07-23 SBel

你不能。此行爲是規範的一部分。對於可變高度，您必須使用JavaScript。 – Jeff

雅傑夫是正確的我過去卡在這很多 – matthiasgh

你可以使用jQuery嗎？我創建了一個函數，稍後再做這個。 – defaultNINJA

如果您告訴標籤的父標籤（包括html和body標籤）也是100％的高度，應該可以解決您的問題。我添加了max-height作爲選項，我不知道你是否希望容器運行整個屏幕的長度。

http://jsfiddle.net/brandonbabb/SL3FC/

html, body { 
    height:100% 
} 
.outer { 
    border: 1px solid black; 
    height: 100%; 
    max-height: 500px 
} 
.col-left { 
    float: left; 
    background: cyan; 
    width: 80%; 
    height: 100%; 
} 
.col-right { 
    float: left; 
    width: 15%; 
    background: yellow; 
    height: 100%; 
} 
.clear { 
    clear: both; 
}

來源

2013-07-23 15:53:59

可以做到這一點，但它的棘手。你需要讓html和body知道它們的高度，然後才能把它們的內容告訴100高度等。---所以，如果html沒有身高，那麼身體如何知道100％是什麼？並在下線。我每隔一天就滑下一個滑坡。

html, body { 
    height: 100%; 
} 

.outer { 
    border: 1px solid black; 

    /* I use this instead of the micro clear-fix in this case - look that up */ 
    overflow: hidden; 
    height: 100%; 
} 

.col-left { 
    float: left; 
    background: cyan; 
    width: 80%; 
    min-height: 100%; 
} 

.col-right { 
    float: left; 
    width: 20%; 
    background: yellow; 
    height: 100%; 
}

http://jsfiddle.net/sheriffderek/fdxGZ/

這也與「粘」頁腳和東西的一個問題：始終戰鬥http://codepen.io/sheriffderek/pen/ziGbE

我希望幫助！

來源

2013-07-23 15:57:55 sheriffderek

**對我來說看起來不錯** – matthiasgh

看到這個清除修正以清除浮游物。然後，您可以在幾個關鍵容器中爲您的標記添加一個類，並省略空的清除div。 http://gnolasgallagher.com/micro-clearfix-hack/（當前解決方案截至2013年7月） – sheriffderek

@matthiasgh這是一個大膽的說法。 –

使用jQuery

$(document).ready(function(){ 
    var outerheight = $('.outer').height(); 
    $('.col-right').height(outerheight);  
});

來源

2013-07-23 16:03:25 robz228

如何製作CSS高度：100％在不同高度的容器中生效？

回答

相關問題