将侧边栏拉伸到 100% 高度
Stretch sidebar to 100% height
如何在不指定父级高度的情况下将侧边栏 div 拉伸到 100% 高度?
不能使用父级高度的原因是因为内容区域是dynamic.Using高度会正好剪掉我的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*/
}
https://css-tricks.com/fluid-width-equal-height-columns/
我建议您看看这些技巧是否适合您。
如果 .left
和 .right
都是内容的子元素 div 并且它们的高度设置为 100% 或任何百分比,那么它们的高度将相等,无论父元素的高度是。它可以是动态的,没有任何问题。
可以设置left和right的父元素为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
并将其作为右侧容器的 CSS height
传递。
试试这个 fiddle
jQuery:
$(document).ready(function(){
var mainH = $('.left').outerHeight();
$('.right').css("height" , mainH);
});
希望这对您有所帮助 :) 编码愉快。
根据您的要求,您可以使用 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) */
}
如何在不指定父级高度的情况下将侧边栏 div 拉伸到 100% 高度?
不能使用父级高度的原因是因为内容区域是dynamic.Using高度会正好剪掉我的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*/
}
https://css-tricks.com/fluid-width-equal-height-columns/
我建议您看看这些技巧是否适合您。
如果 .left
和 .right
都是内容的子元素 div 并且它们的高度设置为 100% 或任何百分比,那么它们的高度将相等,无论父元素的高度是。它可以是动态的,没有任何问题。
可以设置left和right的父元素为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
并将其作为右侧容器的 CSS height
传递。
试试这个 fiddle
jQuery:
$(document).ready(function(){
var mainH = $('.left').outerHeight();
$('.right').css("height" , mainH);
});
希望这对您有所帮助 :) 编码愉快。
根据您的要求,您可以使用 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) */
}