如何将一些像素添加到div的当前高度

Question

我想增加div的高度，以便从auto中提前10px渲染。 在css我已将div的高度设置为auto

css：

div {
  height: auto;
}

但我想这样：

 div {
      height: auto + 10px;
    }

Answer 1

使用填充。

 div {
      height: auto;
      padding-bottom: 10px;
    }

或

 div {
      height: auto;
      padding-top: 10px;
    }

或

 div {
      height: auto;
      padding-top: 5px;
      padding-bottom: 5px;
    }

如果这不是您想要的，那么将jQuery与css一起添加如下： 的CSS：

 div#auto10 {
      height: auto;
    }

的javascript：

$(document).ready(function(){
    $('#auto10').height($('#auto10').height() + 10);
});

Answer 2

为了实现你的要求，我想你可以使用jquery，一个着名而强大的js库，假设div是<div id="test_div"></div>，你可以写下面的代码：

$(document).ready(function(){
    $('#test_div').height($('#test_div').height() + 10);
});

高度将比渲染高10px。

此外，你还可以在div的底部添加一些高度正好为10px的隐藏元素。

希望有所帮助！

Answer 3

使用纯CSS？试试这个：

div {
  background-color: gold;
}

div:before, div:after {
  content: ' ';
  display: block;
  height: 5px; /* 5px + 5px = 10px */
}

Answer 4

纯CSS中的数学是不可能的（如果您愿意，可以使用LESS或SASS之类的预处理器），但您可以通过添加10px之类的内容轻松模仿效果填充到div的底部。

Answer 5

您可以使用，而不是再次查询对象以获得高度 $('#yourDIV').height('+=10');。这将为#yourDIV的任何高度增加10px。