Question

我有这个：

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

我希望该内容占用父级的所有剩余空间，但是当我在css中添加高度：100％时，它只占父级高度的100％。如何将内容div的高度设置为父级的高度 - 标题的高度？

Answer 1

如你所说，高度是30px所以你可以试试这个

#content {
    height: calc(100% - 30px);
}

编辑：http://css-tricks.com/a-couple-of-use-cases-for-calc/一些不了解calc的人的信息

Answer 2

选项一，使用position: absolute标题将其弹出：

#main{
    position: relative;
    height: 500px;
}

#header{
    position: absolute;
    top: 0;
    left: 0;
}

选项二，使用css Calc()：

#content{
    height: calc(100% - 30px);
}

选项三，使用jQuery：

$('#content').css({
   height: ($('#main').height() - $('#header').height()) + 'px';
});

Answer 3

Display: flex是您正在寻找的属性。

看看这个

Working Demo

<强> HTML

<div id="main">
  <div id="header">blah blah blah header </div>
    <div id="content"> content  content  content  content  content  content  content  cdfadfdasfafontent  content  content  content  content  content  content  content  content  content  content  content  content  content  cont fdsfasfadf adsf da fads fa fa ent <div> content  content  content  content  content  content  content  content  content  content  content  content  content  content  contenfafda fa fs ff   content  content  content </div> content  content  contencontent content t content content content content content  content  content  content  content  content  content  content  content </div>
</div>

<强> CSS

html, body {
    height:300px;
}
#main  {
    height:390px;
    background: #999; 
    display:flex;
    flex-direction: column;
}
#header {
    background: #555;
}
#content {
    background: #000;
    color: #fff;
    display:flex; 
    flex: 1;
    flex-direction: column;
}

Answer 4

你可以做到所以高度与你的文字相同

CSS：div height占用父级的所有可用空间

4 个答案:

Working Demo