css - 使用剩余高度的“DIV”不起作用，包括页脚

Question

我的设计在使用剩余高度方面遇到了一些问题。我有一个带有背景图片的区域，下面是另一个用于文本和一些附加信息的 div。

但不知何故，“文本”区域的高度设置包括页脚区域。

我已经通过在文本区域中设置方形背景图像来演示问题。如果它能正确调整大小，图像将显示为正方形。但正如您现在在 JSFiddle 示例中看到的那样，它包括页脚的高度，因为图像比例不正确，并且将页脚覆盖的区域视为文本区域的一部分。

如何确保“文本”区域仅使用页脚和中心照片之间的可用空间？

示例如下:http://jsfiddle.net/v49c6/

这是使用的样式:

#container
{
    height: 100%;
    left: 0px;
    float: left;
    position: absolute;
    width: 100%;
}

.column
{
    position: relative;
    float: left;
    height: 100%;
}

#left
{
    width: 5%;
}

#center
{
    width: 90%;
    display: table;
    height: 100%;
}

#right
{
    width: 5%;
}

#header
{           
    float: left;
    height: 50px;
    width: 350px; 
    font-family: 'PT Sans', sans-serif;
    font-size: 2em;
    margin-left: 25px;
    display: table-row;
}

#navigation
{
    float: right; 
    display: table-row;
}

#content
{
    width: 100%;
    height: 100%;
    display: table-row;
}

#centerphoto
{
    height: 60%;
    width: 100%;
    background: url('http://lorempixel.com/400/200/') no-repeat;
    background-position: center center;
    background-size: 100%;
    background-color: green;
}

#centertext
{
    position: relative;
    height: 40%;
    width: 100%;
    background: url('http://lorempixel.com/200/200/') no-repeat;
    background-size: contain;
}

#footer
{
    position: absolute;
    height: 50px;
    background-color: white;
    width: 100%;
    bottom: 0px;
    display: table-row;
}

#footer-line
{
    margin-left: 25px;
    margin-right: 25px;

    border-top-style: solid;
    border-width: 1px;
    border-color: black;

    font-family: 'PT Sans', sans-serif;
}

#footer-photos-text
{

    float: left;
    font-size: 0.8em;
}

这是HTML

        <div id="container">
          <div id="left" class="column">
          </div> 
         <div id="center" class="column">
            <div id="header">
                HEADER
            </div>
            <div id="navigation">
                NAV
            </div>
            <div id="content">
              <div id="centerphoto">

              </div>
              <div id="centertext">
                  text - this is the problem area
              </div>
            </div>
            <div id="footer">
              <div id="footer-line">
                <div id="footer-photos-text">
                  <div class="center">
                  Copyright
                  </div>
                </div>
              </div>
            </div>
                       </div>
          <div id="right" class="column"> 
          </div>
</div>

Answer 1

我想通过执行以下操作我得到了您想要的:

1. 将#header、#navigation和#content的display更改为内联 block 。

2. 将#footer的display更改为block。

3. 添加:

   <script>
       var height = document.getElementById('center').offsetHeight-100;
       document.getElementById("content").style.height = height+"px";
       window.onresize=function(){
           var height = document.getElementById('center').offsetHeight-100;
           document.getElementById("content").style.height = height+"px";
       };
   </script>
   

到你的代码结束。

告诉我这是否对你有用。

这是查看最终结果的 jsfiddle:http://jsfiddle.net/v49c6/1/