Fatal编程技术网
  • html/
  • Html 滚动时页脚不粘在页面底部

Html 滚动时页脚不粘在页面底部

html css

Html 滚动时页脚不粘在页面底部,html,css,css-position,absolute,Html,Css,Css Position,Absolute,我正在编写一个网页，上面应该有一个页眉，底部应该有一个页脚，右边应该有一个侧栏。我无法将页脚放在页面底部。我不希望它是位置：固定的（这会让人讨厌），但我确实希望它在你向下滚动时出现在页面底部。（如果不需要滚动，则应显示在窗口底部） 这是我用的。可能有一个非常简单的修复方法，但我不知道它是什么。复制/粘贴此文件，您将看到 <html> <head> <style type="text/css"> body { font-s

我正在编写一个网页，上面应该有一个页眉，底部应该有一个页脚，右边应该有一个侧栏。我无法将页脚放在页面底部。我不希望它是位置：固定的（这会让人讨厌），但我确实希望它在你向下滚动时出现在页面底部。（如果不需要滚动，则应显示在窗口底部）

这是我用的。可能有一个非常简单的修复方法，但我不知道它是什么。复制/粘贴此文件，您将看到

<html>
  <head>
    <style type="text/css">
      body {
        font-size: 200%;
      }

      #side {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #0A0;
        z-index: 100;
      }

      #header {
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #A00;
        z-index: 200;
      }

      #header_push {
        clear: both;
        height: 40px;
      }

      #footer {
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #00A;
        z-index: 150;
      }

      #footer_push {
        clear: both;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      HEADER
    </div>
    <div id="header_push"></div>
    <div id="content">
      <h1>Content</h1>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    </div>
    <div id="side">
      SIDE COLUMN
    </div>
    <div id="footer_push"></div>
    <div id="footer">
      FOOTER
    </div>
  </body>


身体{
字体大小：200%；
}
#侧面{
位置：绝对位置；
右：0；
排名：0；
底部：0；
背景色：#0A0；
z指数：100；
}
#标题{
高度：40px；
位置：绝对位置；
排名：0；
左：0；
右：0；
背景色：#A00；
z指数：200；
}
#头推{
明确：两者皆有；
高度：40px；
}
#页脚{
高度：50px；
位置：绝对位置；
底部：0；
左：0；
右：0；
背景色：#00A；
z指数：150；
}
#脚推{
明确：两者皆有；
高度：50px；
}
标题
内容
学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智。学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智。学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

侧柱
页脚
工作正常：

向下滚动时工作不正常（请参见页面侧面的滚动条）：

嘿，我用你的代码做了一把小提琴。据我所知，这就是你要找的。让我知道这是否有帮助

所做的更改： CSS

#footer {
    height: 50px;
    background-color: #00A;
    z-index: 150;
  }
链接到小提琴：

这里是

请按以下方式修改您的CSS

#footer {
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  background-color: #00A;
  z-index: 150;
}
移除
底部：0从
#footer{..}
查看我的评论，了解如何执行此操作

但在你的情况下，只需在身体上放置
位置：relative



它们的
绝对
位置页脚将位于
相对
定位的父项中，并将使用其空间，因此放置
底部：0
会将页脚放置在其父项的底部


有些
您需要将
位置
更改为
固定
共享您的JSIDLE链接？，请参阅。如果删除内容，它将不会粘在底部我也面临同样的问题，但此解决方案无助于解决我的问题：（这并不能解决问题-使用Vucko Answer的可能解决方案这是一个可能的解决方案。这是有意义的，因为这与使用css规则的元素的行为冲突
position:absolute
在使用css规则的元素内部
position:relative
是的，最后。谢谢，这成功了！