Question

我有一个带有标题，内容和页脚的网页。

内容中有背景图片。我希望图像填充页眉和页脚之间的剩余空间。有些div是内容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%; 
}

我试过身高：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缩小到了儿童div的大小，使事情变得更糟......

Answer 1

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

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

背景图片将完全cover #contentParent，并且不会将diue滚动到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>

Answer 2

你可以使用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 3

不确定我是否正确理解了您的问题，但如果您希望在整个屏幕上显示拉伸图像，则可以使用css标记：

background-size: cover;

您可以在此处详细了解css tag

如何使div填充剩余空间？

3 个答案: