Question

我的页脚存在很大问题。我现在搜索了1个小时试图寻找解决方案。我尝试了一切，没有任何作用！

以下是我的HTML结构的示例。部分，然后是它之后的页脚。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <header>
        Hello World
    </header>

    <nav>
        Navigation
    </nav>

    <section>
        Hellooooo!
    </section>

    <footer id="fixed">
        Footer
    </footer>
</body>
</html>

这是我的CSS：

footer {
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #333333;
    padding-top: 15px;
    color: #fff;
    font-family: 'Germania One', cursive;
}

#fixed {
    position: relative;
    bottom: 0;
}

body {
    font-family: sans-serif;
    background-color: #4F4F4F;
    padding: 0;
    margin: 0;
    height:100%;
    position: relative;
}

section {
    padding-bottom: 30px;
    position: relative;
    min-height: 100%;
}

我使用position: static;将其粘贴到底部，但之后它与我的内容重叠！我怎样才能让它坚持到底，从不重叠我的文字？如果它们彼此靠近，我希望在节和页脚之间有30px的空间。

Answer 1

以下CSS修复了底部的页脚，但是调整页脚将与内容重叠。

#fixed {
   position:fixed;
   left:0px;
   bottom:0px;
   width:100%;
   margin-top:30px;
   top:100px;
}

<强>更新

如果您知道该部分的height，请将height作为top footer。

Answer 2

我做的是：

make body { position: relative }
制作页脚{ position: absolute; bottom:0; left 0; }
给节一些房间显示部分{padding-bottom：60px; }

这样，页脚总是在你的身体底部（你的文档）没有任何黑客攻击，适用于IE7 +和其他所有。如果你在整页中运行代码，即使有很多空间可以旅行，你也可以看到底部的页脚。

html {
  height: 100%;
}
body {
  /*default*/
  min-height: 100%;
  padding: 0;
  margin: 0;
  
  /*stick to bottom*/
  position: relative; /*make it first positioned ancestor element*/
  
  /*style*/
  font-family: sans-serif;
  background-color: #4F4F4F;
}
section {
  /*stick to bottom*/
  padding-bottom: 60px;/*give it some room to show*/
}
footer {
  /*stick to bottom*/
  position: absolute;
  bottom: 0;
  left: 0;
  
  /*style*/
  width: 100%;
  background-color: #333333;
  padding-top: 15px;
  color: #fff;
  font-family: 'Germania One', cursive;
}

<header>
  Hello World
</header>

<nav>
  Navigation
</nav>


<section>
  Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula porttitor. ivamus venenatis tellus tincidunt, cursus metus nec,
  tempor ex. Nulla efficitur nisl ut dolor pulvinar scelerisque. Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula
  porttitor. Nulla efficitur nisl ut dolor pulvinar scelerisque. Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula
  porttitor.
</section>
<footer id="fixed">
  Footer
</footer>

CSS / HTML页脚没有坚持

2 个答案: