如何让div填充剩余空间？

内容中有背景图片。我希望图像填充页眉和页脚之间的剩余空间。有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的尺寸，使事情变得更糟..

来源

2017-04-22 Fred

这是一个解决方案，它定义页眉，页脚和#contentParent as 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>

来源

2017-04-22 23:55:24 Johannes

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

来源

2017-04-22 22:34:05 dippas

的Flex并没有为我工作。 – Fred

在片段上完美工作。最新的问题是什么？ – dippas

-1

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

background-size: cover;

你可以在这里阅读更多关于css tag

来源

2017-04-22 22:34:45

已经尝试过。我再次尝试它，它不能增加div的大小。 – Fred

如何让div填充剩余空间？

回答

相关问题