为什么我的页脚没有显示在底部？这个 CSS 有什么问题？答案

【问题标题】：Why isn't my footer displayed in the bottom ? what is wrong with this CSS?为什么我的页脚没有显示在底部？这个 CSS 有什么问题？
【发布时间】：2016-06-08 17:03:57
【问题描述】：

因此，无论动态内容的高度如何，我都希望页脚能够调整并保持在页面底部

下面是正文、包装器和页脚的 CSS .. 当内容太长时页脚不会停留在底部，当您必须滚动时会显示在页面中间

body, html{
margin:0px;
padding:0px;
width:100%;
height:100%;
background:#FFFFFF;
}

#wrapper{
 position:relative;
 top:0px;
 left:0px;
 width:100%;
 padding:0px;
 min-height:100%;
 overflow-x:hidden;
}

#footer{
position:absolute;
bottom:0px;
left:150px;
width:1600px;
height:500px;
background:blue;
}

...

<div id="wrapper">
  <div id="header"></div>
     <div id="logo"><img src="images/u176.png" class="logo_pic" style="outline: none;"></div>
       <div id="search_bar"><input type="text" name="search_bar" class="search" /></div>
          <div id="search_icon"><img src="images/u205.png" width="28px" height="28px" /></div>
            <div id="become_a_chef"><span id="become_title">Become </span></div>
              <div id="login">Log in</div>
                <div id="sign_up">Sign up</div>
                 <div id="tap-container"><img id="tap-pic" class="food_container_pic" src="images/today_menu/u35.png" /></div>
                 <div id="tap-content"></div>
                     <div class="column1">
                       <div class="tap-links">Become a member</div>
                       <div class="tap-links">Sign up</div>
                       <div class="tap-links">Log in</div>
                       <div class="tap-links">Home</div>
                     </div>
                     <div class="column2">
                       <div class="tap-links">Search</div>
                       <div class="tap-links">Download the App</div>
                       <div class="tap-links">How it works</div>
                       <div class="tap-links">Help</div>
                     </div>
                  <div id="chef-rating-responsive">
                    <div class="subinfo_container3"><img class="food_container_pic" src="images/fusion/u1837.jpg" /></div>
                    <div class="subinfo_container4">A</div>
                    <div class="subinfo_container5">Open Now</div>
                    <div class="subinfo_container6">More...</div>
                  </div>
                   <div id="cover_picture_container"><img class="food_container_pic" src="images/u4.jpg" /></div>
                    <div id="profile_picture_container"><img  id="profile_picture" class="img" src="<?php echo $picture;?>"></div>
                      <div id="chef_description_container">
                          <div id="kitchen_name"><span id="kitchen_title"><?php echo $name;?></span></div>
                            <div id="chef_description_summary"><?php echo description;?></div>
                            <div id="schedule_info_container">
                                <div class="subinfo_container">
                                   <img id="chef_rating" src="images/fusion/u1837.jpg" width="186px" height="35px">
                                   <span id="number_reviews">64 reviews</span>
                                </div>
                                 <div class="subinfo_container"><span id="open_now">Open Now</span></div>
                                   <div class="subinfo_container"><span id="chef_location">Chef Location</span></div>
                                    <div class="subinfo_container2"><span id="letter_grade">A</span><span id="chef_grade">since Nov.2016</span></div>
                                     <div class="subinfo_container2">
                                        <div id="clock"><img id="u1341_img" src="images/u1341.png" class="full" ></div>
                                        <span id="schedule_hours"></span>
                                    </div>
                                     <div class="subinfo_container2"><span id="chef_contact">Chef contact</span></div>
                            </div>
                       </div>
            <div  class="today_menu">
               <div class="space"></div>
            </div>
            <div id="footer">
                 <div class="company_footer">
                    <div class="title">Company</div>
                    <div class="column_content_footer">About</div>
                    <div class="column_content_footer">Careers</div>
                    <div class="column_content_footer">Press</div>
                    <div class="column_content_footer">Blog</div>
                    <div class="column_content_footer">About</div>
                    <div class="column_content_footer">Help</div>
                    <div class="column_content_footer">Policies</div>
                    <div class="column_content_footer">Disaster</div>
                    <div class="column_content_footer">Terms & Privacy</div>
                 </div>
                 <div class="discover_footer">
                   <div class="title">Discover</div>
                    <div class="column_content_footer">Trust & Safety</div>
                    <div class="column_content_footer">Invite friends</div>
                    <div class="column_content_footer">Gift card</div>
                    <div class="column_content_footer">pricks</div>
                    <div class="column_content_footer">Mobile</div>
                    <div class="column_content_footer">Events support</div>
                    <div class="column_content_footer">Travel</div>
                    <div class="column_content_footer">Nearby</div>
                 </div>
                 <div class="kitchening_footer">
                       <div class="title"></div>
                       <div class="column_content_footer"></div>
                       <div class="column_content_footer">Serving</div>
                       <div class="column_content_footer">Responsible</
                     </div>
                     <div class="social_media_buttons">Hey</div>
           </div>
       </div>
</div>

【问题讨论】：

你在寻找类似ryanfait.com/sticky-footer的东西
只是一个页脚，不管内容有多长，它都停留在页面的最底部。当没有溢出时，我的停留在底部，当您不必滚动页面时，但是当内容变长时，页脚下方有空间。

标签： html css footer sticky-footer

【解决方案1】：

html, body {
  padding: 0;
  margin: 0;
  background: #fff;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 400px;
  box-sizing: border-box;
}

#footer {
  z-index: 50;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 400px;
  background: blue;
}

<div id="wrapper">

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

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

这对我来说非常好用（稍微调整了一下）。我建议您不要使用像1600px 这样的固定宽度，而是使用百分比和最大宽度。希望这会有所帮助

【讨论】：

编辑了 sn-p。检查它是否能解决您的问题。
我的代码在我的其他网站上运行得非常完美，但在这个新网站上，不。奇怪..仍在尝试查看..基本上是包装器没有很好地适应内容的高度...所以页脚不会在底部：0px;
jsfiddle.net/89gdtvze/3 我用这个带有测试内容的小提琴对其进行了测试。它在这里对我有用（如果我们彼此理解正确的话）。注入任意数量的
标签，页脚停留在页面底部。
感谢您的尝试，但您的页脚隐藏了内容，它不应该。它应该只是重新调整到内容的高度
我不明白。您不想在400px 的内容上方不断显示一个固定的页脚吗？此外，内容并没有完全隐藏，只是由于与页脚大小相同的包装元素的填充而被推到底部（滚动）。

【解决方案2】：

如果你的页脚有一个固定的高度，你可以这样做：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.force-min-height {
  min-height: 100%;
  position: relative;
}

.header {
  background: grey;
}

.content {
  /* padding being the same as footer height */
  padding-bottom: 4em;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4em;
  background: grey;
}

<div class="force-min-height">
   <div class="header">Header</div>
   <div class="content">
      line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
   </div>
   <div class="footer">Footer</div>
</div>

【讨论】：

因为编辑您的原始评论太容易了：P
我是新手，只是在尝试一些事情......（例如：如果我删除收到赞成票的答案，我会失去分数吗 ;-)