Question

我可能不得不改变我用于网页布局的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设置准确的填充顶部。

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

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

Answer 1

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

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

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

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

<强> Demo

Answer 2

上述答案的实现可以动态调整导航栏的高度。

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

动态设置CSS padding-top

2 个答案: