CSS/JavaScript：根据容器大小保留div大小

我有一个包含2个div的div，其中一个具有固定的高度。我想确保第二个div的高度与容器div的高度减去其他div的高度一样多。这个高度不能手动设置，因为它经常调整大小。CSS/JavaScript：根据容器大小保留div大小

<div id="container" style="height: 50%"> 
<div id="header" style="height: 30px;"> 
</div> 
<div id="content"> 
</div> 
</div>

我曾尝试与调整大小jQuery的，但我想我写的东西错了：

$(document).on("resize", "#container", function (event) { 
    $('#content').height($('#container').height()-$('#header').height()); 
});

有什么办法（使用Javascript，CSS）来实现这一目标？

来源

2013-10-13 valepu

是否头必须是' 30px'正好？ –

身高：100％，不是？ –

是的，它必须是30px。和高度100％会使它比容器大30px – valepu

你的主要问题似乎是，你必须大小的元素开始，然后继续听resize事件：

function handleResize() { 
    $('#content').height($('#container').innerHeight()-$('#header').height()); 
} 

$(window).on("resize", handleResize); 

handleResize();

此外，调整大小事件应该被直接连接到窗口。

否则，我建议使用innerHeight()作为考虑填充的容器。

我也做了一些修正，以你的CSS这个工作充分：

#container { 
    position: absolute; 
    width: 100%; 
    height: 50%; 
}

查看完整的小提琴的位置：http://jsfiddle.net/kjcY9/1/

来源

2013-10-13 14:08:22

谢谢，这工作 – valepu

对jQuery还有另外一种方法CSS Flexbox的：

#container { 
    display: flex; 
    flex-direction: column; 
} 

#content { 
    flex: 1; 
}

请参阅demo。不幸的是，这只适用于支持最新Flexbox语法的浏览器。（http://caniuse.com/#search=flexbox）向后兼容的代码也可以使用旧的语法，但是会更加复杂。有关如何做到这一点的更多信息，请参阅David Storey的文章http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/。

来源

2013-10-13 14:19:40 stephenhay

我要给你一个纯CSS的解决方案，检查出Working Fiddle

HTML：

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
</div>

CSS：

#container { 
    height: 300px; /*Whatever fixed height you want*/ 
} 
#container:before { 
    content:''; 
    float: left; 
    height: 100%; 
} 
#header { 
    height: 30px;/*Whatever fixed height you want, or not fixed at all*/ 
    background-color: red; 
} 
#content { 
    background-color: blue; 
    /*No height spesified*/ 
} 
#content:after { 
    content:''; 
    clear: both; 
    display: block; 
}

来源

2013-10-13 14:19:50 avrahamcool

CSS/JavaScript：根据容器大小保留div大小

回答

相关问题