填充剩余的垂直空间 - 只有CSS [英] Fill remaining vertical space - only CSS

问题描述

我需要填写下的 #wrapper 的剩余垂直空间：#first 与 #second div。

我只需要一个CSS解决方案。

HTML：

 < div id =wrapper> 
< div id =first>< / div> 
< div id =second>< / div> 
< / div> 
  

  #wrapper 
 {
 width：300px; 
 height：100％; 
} 
 
 #first 
 {
 width：300px; 
 height：200px; 
 background-color：＃F5DEB3; 
} 
 
 #second 
 {
 width：300px; 
 height：100％; //< -----这应该填充剩余空间
 background-color：＃9ACD32; 
} 
  

解决方案

在 #second div上的 position：absolute; 如下：

FIDDLE

> CSS：

  #wrapper {
 position：relative; 
} 
 
 #second {
 position：absolute; 
 top：200px; 
 bottom：0; 
 left：0; 
 width：300px; 
 background-color：＃9ACD32; 
} 
  

EDIT：替代解决方案 b
$ b

根据你的布局和你在这些div中的内容，你可以使它更简单，更少的makup如下：

FIDDLE

> HTML：

 < div id =wrapper> 
< div id =first>< / div> 
< / div> 
  

  #wrapper {
 height：100％; 
 width：300px; 
 background-color：＃9ACD32; 
} 
 #first {
 background-color：＃F5DEB3; 
 height：200px; 
} 
  

I need to fill the remaining vertical space of #wrapper under #first with #second div.

I need an only CSS solution.

HTML :

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS :

#wrapper
{
   width:300px;
   height:100%;
}

#first
{
   width:300px;
   height:200px;
   background-color:#F5DEB3;
}

#second
{
   width:300px;
   height:100%; //<-----This should fill the remaining space
   background-color:#9ACD32;
}

解决方案

You can do this with position:absolute; on the #second div like this :

FIDDLE

CSS :

#wrapper{
    position:relative;
}

#second {
    position:absolute;
    top:200px;
    bottom:0;
    left:0;
    width:300px;
    background-color:#9ACD32;
}

EDIT : Alternative solution

Depending on your layout and the content you have in those divs, you could make it much more simple and with less makup like this :

FIDDLE

HTML :

<div id="wrapper">
    <div id="first"></div>
</div>

CSS :

#wrapper {
    height:100%;
    width:300px;
    background-color:#9ACD32;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}

这篇关于填充剩余的垂直空间 - 只有CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！