如何将一些像素添加到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

To implement your requirement, I think you may use jquery, a famous and powerful library of js, suppose the div is <div id="test_div"></div> , you can write the following code:

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

the height will just be 10px higher than it is rendered.

Besides, you can also add some hidden element whose height is exactly 10px in the bottom of the div.

Hope helps!

Answer 3

使用纯CSS？尝试这个：

div {
  background-color: gold;
}

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