html - 将侧边栏拉伸(stretch)到 100% 高度

Question

如何在不指定父级高度的情况下将侧边栏 div 拉伸(stretch)到 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

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

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