动态设置 CSS padding-top答案

【问题标题】：dynamically set CSS padding-top动态设置 CSS padding-top
【发布时间】：2014-04-04 03:37:51
【问题描述】：

我可能需要更改用于网页布局的 DIV 的结构。

在this page，我有：

<div id="container_slider"></div>
<div id="container_content">
  <div id="main">
    <div id="header"></div>
    <div id="content"></div>
  </div>
</div>

<style>
  #container_slider {position: absolute; top: 0; z-index: 1;}
  #container_content {position: absolute: top: 0; z-index: 10;}
  #main {width: 940px; margin: 0 auto;}
  #header {width: 170px; float: left;}
  #content {width: 760px; float: right;}
</style>

我希望#header 显示重叠的#container_slider，但我希望#content 垂直显示在#container_slider 下方。

我的问题是#container_slider 的内容是响应式的，所以#container_slider 的高度取决于浏览器的尺寸。

这意味着我无法为 #content 设置准确的 padding-top。

有没有办法可以动态地将#content 的 padding-top 设置为 value = height(#slider_container) + 10 ？

或者我是否需要调整构建 DIV 的方式？

【问题讨论】：

标签： css html dynamic height

【解决方案1】：

您可以通过以下方式检查文档就绪功能的高度：

var heightSlider = $('#container_slider').height();

然后对内容应用与 padding-top 相同的方法：

 $('#content').css({ paddingTop : heightSlider + 30 + 'px' });

Demo

【讨论】：

【解决方案2】：

只是上述答案的一个实现，可以动态调整导航栏的高度。

$( document ).ready(function() {
var topHeight = $('#topNav').height();
var bottomHeight = $('#bottomNav').height();
$('body').css({ paddingTop : topHeight + 5 + 'px' });
$('body').css({ paddingBottom : bottomHeight + 5 + 'px' });
});

【讨论】：