[英]Stretch sidebar to 100% height
如何在不指定父高度的情况下将侧边栏 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*/
}
您可以将左右元素的父元素设置为 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/可以详细修改,希望对你有帮助。
我有你需要的这个 jQuery 解决方案。 获取左侧容器的outerHeight
height
并将其作为右侧容器的 CSS height
传递。
试试这个小提琴
jQuery:
$(document).ready(function(){
var mainH = $('.left').outerHeight();
$('.right').css("height" , mainH);
});
希望这会有所帮助:) 快乐编码。
https://css-tricks.com/fluid-width-equal-height-columns/
我建议看看这些技巧中的任何一个是否适合你。
如果.left
和.right
都是内容 div 的子元素,并且它们的高度设置为 100% 或任何百分比,那么无论父元素的高度是多少,它们的高度都将相等。 它可以是动态的,没有任何问题。
根据您的要求,您可以使用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) */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.