Question

我试图创建一个在其内容下面有额外空间的div。

我不是先验地知道div的高度，但我设置max-height，所以它不应该超越它。但是，当我添加空格（使用paddding-bottom）时，div的高度会超出max-height。

jsFiddle

问题：如何在不增加高度的情况下在底部添加空间？

我发现this answer但它需要嵌套div，我不能这样做，因为我使用bootstrap并且需要重写编译的CSS（像.dropdown>ul>li这样的东西）。

Answer 1

如果你想要从ul而不是margin处理事物，你也可以使用伪:last-child：https://jsfiddle.net/g4c704yx/9/

＆＃13;

ul.dropdown-menu{
  border:1px #ccc solid;
  width:200px;
  max-height:100px;
  overflow-y:auto;
  }
 ul.dropdown-menu:before {/* using :before has its purpose, it will disseaper once the content will reach 200em height meaning content has an equal top negative margin, :after will always add 200em or will be swallowed if a negative margin is applied at content's bottom */
   content:'';
   display:block;
  padding-top:200em;/* average 200 lines ? */
}
ul.dropdown-menu li:first-child {  /* this margin-top has its purpose */
margin-top:-200em; /* climb back up those 200 empty lines made of padding                        and i'm gonne pull up all my folowing siblings, i'm a leader, i'm a ladder !*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

＆＃13;

200em是1em行高的200行，没有填充..

Answer 2

您正在寻找的是在列表中的最后一个元素上设置margin-bottom：

.dropdown-menu li:last-of-type {
  margin-bottom: 500px;
}

我创造了一个展示这个here的小提琴。

希望这有帮助！

Answer 3

此代码适用于我：https://jsfiddle.net/g4c704yx/8/

尝试将填充添加到最后一个li元素。

li:last-child {
  padding-bottom:300px;
}

并从ul中删除你的填充

CSS：div上的padding-bottom和max-height不能很好地协同工作

3 个答案: