Question

关于使用剩余高度，我的设计存在一些问题。我有一个带有背景图像的区域，下面是另一个div用于文本和一些其他信息。

但不知何故，'text'区域的高度设置包括页脚区域。

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

如何确保'text'区域仅使用页脚和centerphoto之间的可用空间？

这里的风格是使用：

#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

我认为通过以下方式我得到了你想要的东西：

将#header，#navigation和#content的{{1}}更改为display。
将inline-block的{{1}}更改为#footer。
添加：
```
display
```

到代码的末尾。

告诉我这是否适合你。

这是一个jsfiddle，可以看到最终结果：http://jsfiddle.net/v49c6/1/

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

1 个答案: