相关疑难解决方法(0)

我需要填写剩余的垂直空间的#wrapper下#first用#secondDIV.

我需要一个唯一的CSS解决方案.

HTML:

#wrapper {
  width: 300px;
  height: 100%;
}

#first {
  width: 300px;
  height: 200px;
  background-color: #F5DEB3;
}

#second {
  width: 300px;
  height: 100%;
  background-color: #9ACD32;
}

CSS:

<div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
</div>

我正在寻找一种方法来使包含我的主页内容的div扩展到适合添加页眉和页脚后留下的空间.HTML的布局如下:

<div id="wrapper">
    <div id="header-wrapper">
        <header>
            <div id="logo-bar"></div>
        </header>
        <nav></nav>
    </div>
    <div id="content"></div>
</div>


<div id="footer-wrapper">
    <footer></footer>
</div>

它的设计是通过将#wrapper的最小高度设置为100%来使页脚始终超过页面底部.问题是#content不会扩展以填充#wrapper中的空白区域,因此很难获得我想要的外观.我该怎么做呢？