将div的填充顶部设置为减去标题的高度

Question

我可以用

将填充设置为我的div

<div id="Products" style="background-color:red; width:100%; padding-top:70px">
</div>

但是不是使用70px就可以使用我根据标题大小生成的值...

<script>
    function resizeDiv() {
    var headerHeight = $('header').outerHeight();
    }
</script>

所以将top填充设置为headerHeight ....这是用css还是js完成的？

Answer 1

使用css()功能。

如果标题更改了高度，您可以创建一个在加载时运行的函数（如果需要）（如果需要）：

var setHeight = function() {
  var top = $('header').outerHeight();
  $('#products').css({'padding-top': top + 'px'});
}

$(window).load(function() {
  //On load you can be sure that the target element has been loaded 
  //(except if it is loaded from an ajax call)
  setHeight();
});

$(window).resize(function() {
  setHeight();
});