Почему мой нижний колонтитул не отображается внизу? что не так с этим CSS?

Question

Итак, я хотел бы, чтобы мой нижний колонтитул настраивался и оставался в нижней части страницы независимо от высоты динамического контента

Ниже приведен 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, но для работы с процентами и максимальной шириной. Надеюсь, что это помогает

Answer 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>