將側邊欄拉伸至 100% 高度

Question

如何在不指定父高度的情況下將側邊欄 div 拉伸到 100% 高度？

不能使用父高度的原因是因為內容區域是動態的。使用高度只會剪輯我的 div 內容。

這是我所做的：

.left {
  width: 70%;
  float: right;
  background: green;
  padding-right:5px;
  box-sizing: border-box;
}

.right {
  width: 30%;
  float: right;
  background: yellow;
  height:100%;/*doesn't stretch*/
}

http://codepen.io/vincentccw/pen/mJEKZe

Answer 1

您可以將左右元素的父元素設置為 position:relative，並將右側元素設置為絕對位置。

.outer {
    position: relative;
    ...
}
.right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background: yellow;
}
.left {
    width: 70%;
    background: green;
    padding-right:5px;
    box-sizing: border-box;
}

jsfiddle： http : //jsfiddle.net/zhouxiaoping/jnde5eod/可以詳細修改，希望對你有幫助。

Answer 2

我有你需要的這個 jQuery 解決方案。 獲取左側容器的outerHeight height並將其作為右側容器的 CSS height傳遞。

試試這個小提琴

jQuery：

$(document).ready(function(){
    var mainH = $('.left').outerHeight();

    $('.right').css("height" , mainH);
});

希望這會有所幫助:) 快樂編碼。

Answer 3

https://css-tricks.com/fluid-width-equal-height-columns/

我建議看看這些技巧中的任何一個是否適合你。

Answer 4

如果.left和.right都是內容 div 的子元素，並且它們的高度設置為 100% 或任何百分比，那么無論父元素的高度是多少，它們的高度都將相等。 它可以是動態的，沒有任何問題。

Answer 5

根據您的要求，您可以使用position: fixed ：

.right {
    background: yellow;
    bottom: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 30%; /* Was this supposed to be width: 30%? (right was defined twice) */
}