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

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

Ниже приведен 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>

html css footer sticky-footer
person front-end    schedule 25.02.2016    source источник
comment
Вы ищете что-то вроде ryanfait.com/sticky-footer?   -  person Jacob Gray    schedule 25.02.2016
comment
Просто нижний колонтитул, который остается в самом низу страницы независимо от длины содержимого. Мой остается внизу, когда нет переполнения, когда вам не нужно прокручивать страницу, но когда содержимое становится длиннее, под нижним колонтитулом есть место.   -  person front-end    schedule 25.02.2016

Ответы (2)


arrow_upward
0
arrow_downward 

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

person Arnold Stoba    schedule 25.02.2016
comment
Отредактировал фрагмент. Проверьте, решает ли это вашу проблему. - person Arnold Stoba; 25.02.2016
comment
Мой код отлично работает на другом моем сайте, но на этом новом нет. странно .. все еще пытаюсь увидеть .. В основном это обертка, которая плохо подстраивается под высоту содержимого ... поэтому нижний колонтитул не будет внизу: 0px; - person front-end; 25.02.2016
comment
jsfiddle.net/89gdtvze/3 Я проверил это с помощью этой скрипки с тестовым содержимым. Это работает для меня здесь (если мы правильно понимаем друг друга). Вставьте столько тегов ‹br›, сколько хотите, нижний колонтитул останется внизу страницы. - person Arnold Stoba; 25.02.2016
comment
Спасибо за попытку, но ваш нижний колонтитул скрывает содержимое, а не должен. он должен просто подстраиваться под высоту содержимого - person front-end; 25.02.2016
comment
Я не понимаю. Разве вы не хотите иметь фиксированный нижний колонтитул, который постоянно отображается над содержимым для 400px? Кроме того, содержимое не полностью скрыто, оно просто проталкивается вниз (прокручивается) из-за заполнения элемента-обертки, который имеет тот же размер, что и нижний колонтитул. - person Arnold Stoba; 25.02.2016
comment
Посмотрите мой ответ, Арнольд, благодаря вашему разъяснению, это должно быть так. - person André Huf; 25.02.2016
comment
@ArnoldStoba опубликовал html-структуру выше - person front-end; 25.02.2016

arrow_upward
0
arrow_downward

Если ваш нижний колонтитул имеет фиксированную высоту, вы можете сделать что-то вроде этого:

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>

person André Huf    schedule 25.02.2016
comment
Потому что отредактировать исходный комментарий было слишком просто :P - person Arnold Stoba; 25.02.2016
comment
Я новичок в этом и просто пробую разные вещи... (например: потеряю ли я очки, если удалю ответ, получивший одобрение ;-) - person André Huf; 25.02.2016