Question

我正在尝试用float: bottom填写div的底部空格。

Popup

我不认为这种情况并不常见，但我不知道如何使用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>

我知道我可以使用position: absolute执行此操作，并在测量顶部div后使用JavaScript设置top，但我更喜欢CSS解决方案！

可以吗？

^{注意：两个div的高度都是动态的。}

Answer 1

您可以使用display:flex：

＆＃13;

.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*/
}

＆＃13;

<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>

＆＃13;

JSFiddle

Documentation

Answer 2

我知道您已接受display:flex;的答案，但我只是想使用display:table添加一个更易于浏览器友好的答案：

如果代码段不起作用，请

Fiddle。

＆＃13;

.popup {
    width: 200px;
    height: 200px;
    background: grey;
    padding: 5px;
}
.popup .top {
    width: 100%;
    background: orange;
}
.popup .bottom {
    position: relative;
    width: 100%;
    background: yellow;
    height: 100%;
}
#test1 .popup {
    display: flex;
    flex-direction: column;
}
#test1 .popup>.bottom {
    flex: 1;
}
#test2 .popup {
    display:table;
}
#test2 .popup > .row {
    display:table-row;
}
#test2 .popup > .row > div {
    display:table-cell;
}

＆＃13;

<h2> Flex </h2>
<div id="test1">
    <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>
</div>
<br />
<h2> Table </h2>
<div id="test2">
    <div class=popup>
        <div class="row">
            <div class=top>
                <input type=text />
                <input type=text />
            </div>
        </div>
        <div class="row">
            <div class=bottom>I want to fill the rest of the popup!</div>
        </div>
    </div>
</div>

＆＃13;

它需要的只是一点额外的HTML，但是你确实获得了卓越的跨浏览器兼容性。显然，如果您正在为Cordova应用程序编写代码，那么它并没有太大的区别。

Answer 3

.popup {
  width: 200px;
  height: 200px;
  background: grey;
  padding: 5px;
  overflow:hidden;
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: 100%;
  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>

Answer 4

喜欢这个吗？

＆＃13;

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

＆＃13;

<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! I want to fill the rest of the popup! I want to fill the rest of the popup! I want to fill the rest of the popup!</div>
</div>

＆＃13;

Answer 5

尝试使用flex。

要弹出添加：

display: flex;
flex-direction:column;

要添加：

flex: 1;

小提琴：Flex Demo

参考：Css-Tricks

希望这就是你要找的东西。

通过CSS填写div的底部空间

5 个答案: