个人中心
gpt4 book ai didi

html - 粘性页脚未完全粘在底部

转载 作者：太空宇宙 更新时间：2023-11-04 16:04:51 26 4
gpt4 key购买 nike

我想在我的两栏内容上添加一个粘性页脚，但问题是它不能真正完全占据页面的底部。

我一直在应用我在网上找到的 css 粘性页脚，但我无法让它工作。

我在下面附上了我的代码。

Codepen 代码在这里:I've add my code into Codepen Here 

<style> body {
  margin: 0;
  padding: 0;
  /*background-image: url("main-bg.jpg");*/
  background-color:green;
  height: 100%;
}
.container {
  width: 100%;
  position: relative;
  margin-bottom: -50px;
  height: 100%;
}
/* HEADER SECTION */

.header {
  background-color:blue;
  /*background-image: url("bgs.jpg");
  background-repeat: repeat;
  background-size: cover;
  */
  height: 100px;
  overflow: auto;
}
.header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.header ul li {
  float: right;
  padding: 14px 16px;
}
.header li ul {
  display: none;
}
.header a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}
.header li:hover ul {
  display: block;
}
/*FOOTER SECTION*/

.footer {
  clear: both;
  padding: 5px 5px;
  background: #cc9;
  height: 50px;
}
.footer-right {
  float: right;
}
.footer-left {
  float: left;
}
/*CONTENT SECTION*/

.content {
  padding: 10px;
  padding-bottom: 50px;
  height: 100%;
  overflow: hidden;
  background-color:silver;
  width: 95%;
}
.left-content {
  float: left;
  width: 800px;
  padding: 10px;
  margin-left: 150px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: : 150px;
  /*background-image:url("main-content-bg.png");*/
  background-color: white;
  -webkit-box-shadow: 8px -9px 20px 9px rgba(112, 112, 138, 0.69);
  -moz-box-shadow: 8px -9px 20px 9px rgba(112, 112, 138, 0.69);
  box-shadow: 8px -9px 20px 9px rgba(112, 112, 138, 0.69);
}
.right-content {
  float: right;
  width: 320px;
  padding: 10px;
  background: #99c;
}
#footer {
  clear: both;
  padding: 5px 5px;
  background: #cc9;
  height: 40px;
}
</style>
<body>

  <div class="container">

    <div class="header">
      <br>
      <ul>
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">SERVICES</a>
        </li>
        <li><a href="#">PORTFOLIO</a>
          <ul>
            <li><a href="#">Birthday Events</a>
            </li>
            <li><a href="#">Wedding Events</a>
            </li>
            <li><a href="#">Anniversary Events</a>
            </li>
            <li><a href="#">Other Events</a>
            </li>
          </ul>
        </li>
        <li><a href="#">CONTACT</a>
        </li>
        <li><a href="#">ABOUT</a>
        </li>
      </ul>
    </div>

    <div class="content">
      <div class="left-content">
        <p>All About Pixel Foto</p>
        <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula,
          lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut. Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi.
          Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor
          lectus arcu sit amet nunc. Vivamus gravida vehicula arcu, vitae vulputate augue lacinia faucibus. Donec volutpat nibh sit amet libero ornare non laoreet arcu luctus. Donec id arcu quis mauris euismod placerat sit amet ut metus. Sed imperdiet
          fringilla sem eget euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing, neque ut pulvinar tincidunt, est sem euismod odio, eu ullamcorper turpis nisl sit amet velit.
          Nullam vitae nibh odio, non scelerisque nibh. Vestibulum ut est augue, in varius purus. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Morbi id aliquam ligula. Aliquam id dui sem. Proin rhoncus
          consequat nisl, eu ornare mauris tincidunt vitae. Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin lacinia. Ut egestas bibendum tempor. Morbi non nibh sit amet ligula blandit ullamcorper in nec risus.
          Pellentesque fringilla diam faucibus tortor bibendum vulputate. Etiam turpis urna, rhoncus et mattis ut, dapibus eu nunc. Nunc sed aliquet nisi. Nullam ut magna non lacus adipiscing volutpat. Aenean odio mauris, consectetur quis consequat quis,
          blandit a nunc. Sed orci erat, placerat ac interdum ut, suscipit eu augue. Nunc vitae mi tortor. Ut vel justo quis lectus elementum ullamcorper volutpat vel libero.</p>
      </div>
      <div class="right-content">
        <p align="center">All About Me</p>
        <p>I'm Dick Roman and I foresee what I will become when I first time use a camera. I was eager to have my own camera and take elegant photos of my unforgettable moments in my life. It was served as my inspiration to purse and take this field of photography.
          Today I am able to render my services to my clients and I will guarantee every works I made will be best of the best</p>
        <ol style="list-style-type:none;align:center">
          <p>Today I am rendering my skills as a:</p>
          <li>Image Editor</li>
          <li>Landscape Photograher</li>
          <li>Video Editor</li>
          <li>Web Designer</li>
        </ol>

        <p align="center">You could drop-by to my social media profiles</p>
        <p align="center">Just click on any links below to visit my account</p>

        <ul style="list-style-type:none">
          <li>
            <a href="#">Facebook</a>
          </li>
          <li><a href="#">Twitter</a>
          </li>
          <li><a href="#">Instagram</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer">
      <div class="footer-left">
        <p>&copy;Copyright 2016 - Codeblocks Design</p>
      </div>


      <div class="footer-right">
        <p>
          <a href="#">
            <img src="fb.png" height="60%">
          </a>
          <a href="#">
            <img src="twitter.png" height="60%">
          </a>
          <a href="#">
            <img src="instagram.png" height="60%">
          </a>
          <a href="#">
            <img src="google.png" height="60%">
          </a>
        </p>
      </div>
    </div>

  </div>
</body>
上面的代码如何在我的浏览器上显示: Here's the output

最佳答案

删除 <style>从你的 CSS 来看它是无效的 selector .

用于粘性页脚 position:fixed将使它粘在屏幕底部。

这是修改过的片段。

*{
  margin:0px;
  padding:0px;
}

body {
  margin: 0;
  padding: 0;
  /*background-image: url("main-bg.jpg");*/
  background-color:green;
  height: 100%;
}
.container {
  width: 100%;
  position: relative;
  margin-bottom: -50px;
  height: 100%;
}
/* HEADER SECTION */

.header {
  background-color:blue;
  /*background-image: url("bgs.jpg");
  background-repeat: repeat;
  background-size: cover;
  */
  height: 100px;
  overflow: auto;
}
.header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.header ul li {
  float: right;
  padding: 14px 16px;
}
.header li ul {
  display: none;
}
.header a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}
.header li:hover ul {
  display: block;
}
/*FOOTER SECTION*/

.footer {
  clear: both;
  padding: 5px 5px;
  background: #cc9;
  height: 50px;
}
.footer-right {
  float: right;
}
.footer-left {
  float: left;
}
/*CONTENT SECTION*/

.content {
  padding: 10px;
  padding-bottom: 50px;
  height: 100%;
  overflow: hidden;
  background-color:silver;
  width: 95%;
}
.left-content {
  float: left;
  width: 800px;
  padding: 10px;
  margin-left: 150px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: : 150px;
  /*background-image:url("main-content-bg.png");*/
  background-color: white;
  -webkit-box-shadow: 8px -9px 20px 9px rgba(112, 112, 138, 0.69);
  -moz-box-shadow: 8px -9px 20px 9px rgba(112, 112, 138, 0.69);
  box-shadow: 8px -9px 20px 9px rgba(112, 112, 138, 0.69);
}
.right-content {
  float: right;
  width: 320px;
  padding: 10px;
  background: #99c;
}
#footer {
  clear: both;
  padding: 5px 5px;
  background: #cc9;
  height: 40px;
}
</style>
<body>

  <div class="container">

    <div class="header">
      <br>
      <ul>
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">SERVICES</a>
        </li>
        <li><a href="#">PORTFOLIO</a>
          <ul>
            <li><a href="#">Birthday Events</a>
            </li>
            <li><a href="#">Wedding Events</a>
            </li>
            <li><a href="#">Anniversary Events</a>
            </li>
            <li><a href="#">Other Events</a>
            </li>
          </ul>
        </li>
        <li><a href="#">CONTACT</a>
        </li>
        <li><a href="#">ABOUT</a>
        </li>
      </ul>
    </div>

    <div class="content">
      <div class="left-content">
        <p>All About Pixel Foto</p>
        <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula,
          lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut. Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi.
          Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor
          lectus arcu sit amet nunc. Vivamus gravida vehicula arcu, vitae vulputate augue lacinia faucibus. Donec volutpat nibh sit amet libero ornare non laoreet arcu luctus. Donec id arcu quis mauris euismod placerat sit amet ut metus. Sed imperdiet
          fringilla sem eget euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing, neque ut pulvinar tincidunt, est sem euismod odio, eu ullamcorper turpis nisl sit amet velit.
          Nullam vitae nibh odio, non scelerisque nibh. Vestibulum ut est augue, in varius purus. Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget hendrerit. Morbi id aliquam ligula. Aliquam id dui sem. Proin rhoncus
          consequat nisl, eu ornare mauris tincidunt vitae. Vestibulum sodales ante a purus volutpat euismod. Proin sodales quam nec ante sollicitudin lacinia. Ut egestas bibendum tempor. Morbi non nibh sit amet ligula blandit ullamcorper in nec risus.
          Pellentesque fringilla diam faucibus tortor bibendum vulputate. Etiam turpis urna, rhoncus et mattis ut, dapibus eu nunc. Nunc sed aliquet nisi. Nullam ut magna non lacus adipiscing volutpat. Aenean odio mauris, consectetur quis consequat quis,
          blandit a nunc. Sed orci erat, placerat ac interdum ut, suscipit eu augue. Nunc vitae mi tortor. Ut vel justo quis lectus elementum ullamcorper volutpat vel libero.</p>
      </div>
      <div class="right-content">
        <p align="center">All About Me</p>
        <p>I'm Dick Roman and I foresee what I will become when I first time use a camera. I was eager to have my own camera and take elegant photos of my unforgettable moments in my life. It was served as my inspiration to purse and take this field of photography.
          Today I am able to render my services to my clients and I will guarantee every works I made will be best of the best</p>
        <ol style="list-style-type:none;align:center">
          <p>Today I am rendering my skills as a:</p>
          <li>Image Editor</li>
          <li>Landscape Photograher</li>
          <li>Video Editor</li>
          <li>Web Designer</li>
        </ol>

        <p align="center">You could drop-by to my social media profiles</p>
        <p align="center">Just click on any links below to visit my account</p>

        <ul style="list-style-type:none">
          <li>
            <a href="#">Facebook</a>
          </li>
          <li><a href="#">Twitter</a>
          </li>
          <li><a href="#">Instagram</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer">
      <div class="footer-left">
        <p>&copy;Copyright 2016 - Codeblocks Design</p>
      </div>


      <div class="footer-right">
        <p>
          <a href="#">
            <img src="fb.png" height="60%">
          </a>
          <a href="#">
            <img src="twitter.png" height="60%">
          </a>
          <a href="#">
            <img src="instagram.png" height="60%">
          </a>
          <a href="#">
            <img src="google.png" height="60%">
          </a>
        </p>
      </div>
    </div>

  </div>
</body>

关于html - 粘性页脚未完全粘在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38929791/

26 4 0
文章推荐： html - 如何使 2 个不同的跨度在悬停时改变颜色
文章推荐： html - 链接上的标题在 IE7 中不显示
文章推荐： javascript - 如何向从react-router链接标签呈现的 anchor 标签添加ID属性？
文章推荐： c++ - 比较器 -1073741819 (0xC0000005)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com