Question

我的问题如下。我有3个div：标题，内容和页脚。

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

我想将我的标题div永久固定在屏幕顶部，并且我的底部div永久固定在底部，这样当我滚动页面时，我实际上滚动浏览了我的内容div，我的页眉和页脚div总是在顶部和底部可见。

我虽然可以通过将页眉和页脚设置为固定位置来解决这个问题，但是因为我的标题有一个＆＃39; auto＆＃39;高度，我不知道如何抵消我的内容，以免它与我的标题重叠。

这是我的CSS：

#header {
  position: fixed;
  width: 100%;

  background-color: red;
}

#content {
  padding-bottom: 100px;

  background-color: blue;
}

#main-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;

  background-color: white;
}

正如你所看到的，我已经能够在页面底部偏移我的内容，给它一个100px的底部填充（我的页脚的高度），但因为我的标题没有固定高度（它根据其内容自动调整），我不知道如何在顶部偏移它，它会被标题重叠。谁能帮助我？

Answer 1

使用jquery。

fiddle

$(document).ready(function(){
    $("#content").css('padding-top',$("#header").height());
      $(window).resize(function(){
         $("#content").css('padding-top',$("#header").height());
   });
});

相对于固定div定位div

1 个答案: