如何让一个div补剩余space？

Question

我有一个带有页眉、内容和页脚的网页。

内容中有背景图片。我希望图像填充页眉和页脚之间剩余的 space。有 div 是 children 的内容 div 图像有时有内容，有时没有。

HTML:

<body>
<div id='main'>
    <div id='header'>
        <div id='logoCompany'>
            <img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
        </div>
    </div>
    <div id='contentParent' class='floatClear'>
        <div id='content' style = "text-align: center;">
            <div id='leftPane'>
                Left Col
            </div>  
            <div id='rightPane'>
                Right Col
            </div>
        </div>
    </div>
    <div id='footer'>
    Footer      
    </div>
</div>
</body>

CSS:

* {
    margin: 0px;
}
.floatClear {
    clear: both;
}

.headerGraphics {
    display: inline;
}

#header { 
    background: #023489;
    text-align: center;
}

#logoCompany {
    display: inline;
}
#contentParent {    
    height: 373px;
    width: 100%;
    background-image: url(../Graphics/background.jpg);
 } 
#leftPane { 
    background: yellow;
    float: left;
    margin: 100px 0 0 10%;
    opacity: .5;
    width:40%; 
}    
#rightPane { 
    background: green;
    float: right;
    margin: 100px 10% 0 0;
    opacity: .5;
    width:40%; 
}
#footer { 
    width:100%; 
}

我试过 height: 100% 但我怀疑没有内容会失败。事实上，我认为这就是为什么一切都失败的原因，除非我对高度进行硬编码。但由于显而易见的原因，这不是一个好的解决方案。

Here's an example

有人知道如何使这项工作有效吗？

编辑：我试着改变这个：

#contentParent {    
    height: 373px;
    width: 100%;
    background-image: url(../Graphics/background.jpg);
 }

对此：

#contentParent {    
    flex: 1;
    background-image: url(../Graphics/background.jpg);
 }

但是它把 div 缩小到 child div 的大小，让事情变得更糟..

Answer 1

你可以使用 flexbox 做到这一点，

这是您的代码的简化版本。

body {
  margin: 0
}

#main {
  display: flex;
  flex-direction: column;
  height: 100vh
}

#header,
#footer {
  background: green;
  padding: 10px;
}

#contentParent {
  flex: 1;
  background: red;
}

#content {
  display: flex;
  justify-content:center;
  align-items:center;
  height:100%
}

<div id='main'>
  <div id='header'>
    <div id='logoCompany'>
      Logo Name
    </div>
  </div>
  <div id='contentParent'>
    <div id='content'>
      <div id='leftPane'>
        Left Col
      </div>
      <div id='rightPane'>
        Right Col
      </div>
    </div>
  </div>
  <div id='footer'>
    Footer
  </div>
</div>

Answer 2

不确定我是否理解正确你的问题，但如果你想在整个屏幕上显示拉伸图像，你可以使用 css 标签：

background-size: cover;

您可以在此处阅读有关 css tag

的更多信息

Answer 3

这是一个将页眉、页脚和 #contentParent 定义为 position: fixed 的解决方案，并给出 #contentParent 100% 高度减去页眉和页脚的高度（本例中为 80px -这取决于你自己的设置）。

必须在 #contentParent 内添加任何额外的内容 - 然后该元素将滚动，因为它具有 overflow-y:auto;。由于页眉和页脚的绝对位置，页眉和页脚将始终保留在屏幕上，不会覆盖内容的任何部分，因为 #contentParent 在顶部和底部有相应的边距，等于页眉和页脚的高度。

背景图像将 cover #contentParent 完全 background-attachment: fixed 并且不会滚动到 background-attachment: fixed（集成在快捷方式 background 属性中）

html,
body,
#main {
  height: 100%;
  margin: 0px;
}

.floatClear {
  clear: both;
}

.headerGraphics {
  display: inline;
}

#header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 40px;
  background: #023489;
  text-align: center;
}

#logoCompany {
  display: inline;
}

#contentParent {
  position: fixed;
  height: calc(100% - 80px);
  width: 100%;
  overflow-Y: auto;
  margin: 40px 0;
  background: url(http://placehold.it/1500x800/fc7) center center no-repeat;
  background-position: fixed;
  background-size: cover;
}

#leftPane {
  background: yellow;
  float: left;
  margin: 100px 0 0 10%;
  opacity: .5;
  width: 40%;
}

#rightPane {
  background: green;
  float: right;
  margin: 100px 10% 0 0;
  opacity: .5;
  width: 40%;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  width: 100%;
  background: lightblue;
}

<body>
  <div id='main'>
    <div id='header'>
      <div id='logoCompany'>
        <img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
      </div>
    </div>
    <div id='contentParent' class='floatClear'>
      <div id='content' style="text-align: center;">
        <div id='leftPane'>
          Left Col
        </div>
        <div id='rightPane'>
          Right Col
        </div>
      </div>
    </div>
    <div id='footer'>
      Footer
    </div>
  </div>
</body>

如何让一个div补剩余space？

How to make a div fill remaining space?

html

css

background-image