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

Question

我想增加 div 的高度，使其从 auto 中提前 10px 渲染。在 CSS 中，我将 div 的高度设置为 auto

CSS：

div {
  height: auto;
}

但我想要这样：

 div {
      height: auto + 10px;
    }

score 20 · Accepted Answer

使用填充。

 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);
});

score 6 · Accepted Answer

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

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

高度只会比渲染的高 10px。

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

希望有所帮助！

score 5 · Accepted Answer

使用纯 CSS？尝试这个：

div {
  background-color: gold;
}

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

score 1 · Accepted Answer

1

您可以使用 $('#yourDIV').height('+=10');. 这将增加 10px 到 #yourDIV 的任何高度。

于 2017-07-20T07:50:01.360 回答

score 0 · Accepted Answer

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

5 回答 5