Html 如何锚定页脚但保持内容高度100%_Html_Css_Sticky Footer

Html 如何锚定页脚但保持内容高度100%

html css

Html 如何锚定页脚但保持内容高度100%,html,css,sticky-footer,Html,Css,Sticky Footer,我正在使用它，但它并没有像它应该的那样工作，并且通过视口提供了大约200或400像素的扩展我认为展示我需要的东西比解释更容易，见下文：编辑：我更新了代码，以反映粘贴页脚的外观原创这是我的代码： <div id="wrapper"> <header> Header </header> <div id="container"> <div id="content"> Content

我正在使用它，但它并没有像它应该的那样工作，并且通过视口提供了大约200或400像素的扩展

我认为展示我需要的东西比解释更容易，见下文：

编辑：我更新了代码，以反映粘贴页脚的外观

原创这是我的代码：

<div id="wrapper">
  <header>
    Header
  </header>

  <div id="container">
    <div id="content">
      Content
    </div>

    <div id="sidebar">
      Sidebar
    </div>
  </div>

  <footer>
    Footer
  </footer>
</div>


标题
内容
边栏
页脚

还注意到我在代码中有一个侧边栏，但在提供的图片中没有。我还需要一个没有背景的侧边栏。

尝试使用此方法将页脚固定在底部

.footer {
width:100%;
position:fixed;
bottom:0;
height:30px;
}

您没有按照教程进行操作，否则我会在您的

包装中看到一个空的div
，带有classpush
。另外，footer
不应该在包装器中
根据

请尝试以上内容并发布您的实际CSS。
请参阅OP发布的内容。这不是您的答案所提供的。如果您不显示CSS，您希望如何帮助解决CSS问题？百分比高度取决于其父级，当父级为位置：绝对
，否则会返回到高度：自动
，这正是你所看到的。当您将absolute应用于父级时，您完全破坏了布局。我认为没有JavaScript是不可能的，但我可能错了。看，这个问题的状态如何？人们试图提供帮助，但自从这篇文章发表后，却没有得到任何回应。提供的答案没有一个符合我的需要/回答了我的问题。我最终选择使用z-index覆盖身体的顶部和底部，牺牲了身体100%的高度。
<body>
        <div class="wrapper">
            <header>
                Header
            </header>
            <div id="container">
                <div id="content">
                    Content
                </div>
                <div id="sidebar">
                    Sidebar
                </div>
            </div>
            <div class="push"></div>
        </div>

        <footer>
            <p>Copyright (c) 2008</p>
        </footer>
</body>

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
   height: 142px; /* .push must be the same height as footer */
}