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

Question

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

下面是 body、wrapper 和 footer 的 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>

Answer 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 这样的固定宽度，而是使用百分比和最大宽度。希望这有帮助