将侧边栏拉伸到 100% 高度答案

【问题标题】：Stretch sidebar to 100% height将侧边栏拉伸到 100% 高度
【发布时间】：2020-02-09 11:09:54
【问题描述】：

如何在没有指定父高度的情况下将侧边栏 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

【问题讨论】：

你不能。 height 百分比相对于父级的 height。

标签： html css height stretch

【解决方案1】：

可以将left和right的父元素设置为position:relative，将right元素设置为绝对位置。

.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/ 可以详细修改一下，希望对你有帮助。

【讨论】：

【解决方案2】：

我有这个 jQuery 解决方案可以满足您的需求。获取左侧容器的 outerHeight 并将其作为 CSS height 传递给右侧容器。

试试这个fiddle

jQuery:

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

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

希望这会有所帮助 :) 编码愉快。

【讨论】：

【解决方案3】：

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

我建议看看这些技巧是否适合你。

【讨论】：

【解决方案4】：

如果 .left 和 .right 都是内容 div 的子元素，并且它们的高度设置为 100% 或任何百分比，那么无论父元素的高度是多少，它们的高度都将相等。它可以是动态的，没有任何问题。

【讨论】：

【解决方案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) */
}

【讨论】：