动态div高度始终为100％

如何让div始终填充垂直空间的100％？我有this Fiddle，它显示了我如何使用jQuery完成它，但可以使用CSS完成吗？动态div高度始终为100％

var height = $('.content').height(); 
$('.sidebar').height(height);

PS，我们不能把一个高度的容器上，因为我们显然需要侧边栏的高度成长作为内容填充。内容区域。

来源

2014-09-18 BenRacicot

你的小提琴没有按”工作，所以我不知道你想要什么。 100％的*空间是多少？ – 2014-09-18 21:14:57

jQuery没有加载小提琴，我的道歉。现在检查。此外，评论的jQuery与这个问题没有关系。如何用CSS做到这一点。 – BenRacicot 2014-09-19 02:08:27

好，根据你的小提琴，这将是足够用的700像素的固定高度设置为那些.sidebar和.content div的，我以为是不是你要找什么，所以在这里你用你有一个自适应解决方案HTML标记具有完全不同的CSS：

.wrapper { 
    height:100%; 
    overflow:hidden; 
    width:700px; 
} 
.sidebar { 
    background: grey; 
    float:left; 
    width: 200px; 
    padding-bottom:5000px; 
    margin-bottom:-5000px; 
} 
.content { 
    background: #AEAEAE; 
    position:relative; 
    float:right; 
    width:500px; 
    padding-bottom:5000px; 
    margin-bottom:-5000px; 
} 
footer { 
    clear:both; 
    float:none; 
    background: yellow; 
    display:block; 
    height:30px; 
    position:relative; 
}

该解决方案将接受任何高度，既.sidebar和.content将采取取其达到相同的高度列布局的最大DIV的高度。但是，如果你觉得你需要一些高度两个div的，你也可以这样做：

.sidebar, .content{min-height:700px;} /* or whatever */

See fiddle和玩，看看它是如何工作

来源

2014-09-18 21:13:35 Devin

哇@Fabio！我将永远不会想出这个。是否有任何警告？您应该撰写完整的博客文章并发布回来。 – BenRacicot 2014-09-19 02:19:39

不，没有，这是做这件事的方法之一，甚至不是唯一的方法，只是我倾向于使用最多的方法之一（我每天都这样做） – Devin 2014-09-19 02:31:14

如果您有5000px HEIGHT侧栏，那么添加一个填充底部：10000px和margin-bottom：-10000px。重要的部分是使用填充底部和边距底部的巨大值，其中margin-bottom是填充底部的确切负数 – Devin 2014-09-19 20:11:43

尝试使用：

html, body, .wrapper, .sidebar { height: 100%; }

外部包装必须被太定义。

来源

2014-09-18 20:59:19

'body {height：100％}'是不好的习惯。 – hellaminx 2014-09-18 21:08:00

@scheisse_minelli有时不可避免。有任何消息来源来支持“不良做法”声明？ – 2014-09-18 21:15:26

这只是我的看法。我没有试图辩论。 – hellaminx 2014-09-18 21:17:31

你的主要观点是有背景在扩大整个高度对吗？你不关心旁边元素的“实际”高度，是吗？

在这种情况下，你可以做什么，我在这fiddle update of yours那样：

裹一旁，边栏在<div class="main">。由于div始终扩展到最大的孩子身高，无论视口如何，它的高度都是自动的整个高度。现在添加下面的CSS来创建具有整个展开高度和颜色的旁边盒子后面的伪装。瞧，你有你的整个高度背景：

.main { 
    position: relative; 
} 
.main:after { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 300px; 
    background: gray; 
    content: ""; 
    z-index: -1; 
}

来源

2014-09-19 15:10:35 techCreationist

不错@TC我将在稍后给这个练习并且让你回到你身边这里。 – BenRacicot 2014-09-19 17:57:40

我真的晚了，但我有这个问题几次，我觉得在这种情况下，display: table-cell;真正的亮点：http://jsfiddle.net/yw6w562e/2/

再加上它也真的很容易重新调整它们在较小尺寸的浏览器与

display: table-header-group; 和 display: table-footer-group;（见小提琴媒体查询）

来源

2015-04-01 14:07:50 Zubex

动态div高度始终为100％

回答

相关问题