通过CSS填充div的底部空间 [英] Fill out the bottom space of a div via CSS

问题描述

我试图用 float：bottom 来填充div的底部空间。

< img src =https://i.stack.imgur.com/1YwO8.pngalt =Popup>

我不认为这很少见但我不知道如何用CSS来完成。

。 popup {width：200px; height：200px;背景：灰色; padding：5px;}。popup> .top {width：100％;最大高度：60％;背景：orange;}。popup> .bottom {position：relative;宽度：100％;身高：自动;底部：0;背景：黄色;}

< div class = popup> < div class = top> < input type = text /> < input type = text /> < / DIV> < div class = bottom>我想填充其他弹出窗口！< / div>< / div>

我知道我可以通过 position：absolute 并设置顶部在测量顶部div后使用JavaScript，但我更喜欢CSS解决方案！

是否可以完成？

^{注意：两个div的高度都是动态的。} 可以使用 display：flex ：

  .popup {
 width：200px ; 
 height：200px; 
背景：灰色; 
 padding：5px; 
 display：flex; / *新增* / 
 flex-direction：column; / *新增* / 
} 
 .popup> .top {
 width：100％; 
最大高度：60％; 
 background：orange; 
} 
 .popup> .bottom {
 position：relative; 
宽度：100％; 
 height：auto; 
 bottom：0; 
背景：黄色; 
 flex：1; / *新增* / 
} 
  

jsFiddle

文档

I'm trying to fill out the bottom space of a div with float: bottom.

I don't think this is very uncommon but I wouldn't know how it can be done with CSS.

.popup {
  width: 200px;
  height: 200px;
  background: grey;
  padding: 5px;
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: auto;
  bottom: 0;
  background: yellow;
}

<div class=popup>
  <div class=top>
    <input type=text />
    <input type=text />
  </div>
  <div class=bottom>I want to fill the rest of the popup!</div>
</div>

I know I can do this with position: absolute and setting the top with JavaScript after measuring the top div, but I prefer a CSS solution!

Can it be done?

^{Note: the height of both divs is dynamic.}

解决方案

You can use display:flex :

.popup {
  width: 200px;
  height: 200px;
  background: grey;
  padding: 5px;
  display: flex; /*Added*/
  flex-direction: column; /*Added*/
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: auto;
  bottom: 0;
  background: yellow;
  flex: 1; /*Added*/
}

jsFiddle

Documentation

这篇关于通过CSS填充div的底部空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！