Нижний колонтитул не приклеивается к нижней части страницы

Мой нижний колонтитул не придерживается нижней части страницы. Я уже пробовал следующее:Нижний колонтитул не приклеивается к нижней части страницы

footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: rgba(255,255,255,0.2); 
    position: absolute; 
    bottom: 0; 
} 

footer { 
    height: 50px; 
    position: absolute; 
    left: 0; 
    right: 0; 
    background-color: #00A; 
    z-index: 150; 
} 

footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 30px; 
}

Ни одно из этих решений (находится на StackOverflow) работали для меня до сих пор, так что я сделал codepen с тем, что у меня есть:

http://codepen.io/sredmond/pen/revjdv

Если вы расширяете код ручку, так что вы видите больше результата, чем код, который вы увидите, что он остается

NAVBAR 

JUMBOTRON 

CONTENT 

FOOTER 
<!-- 


Random white space 


-->

то, что я хочу, чтобы это сделать, это пойти например:

NAVBAR 

JUMBOTRON 

CONTENT 









FOOTER

Спасибо!

источник

2016-04-16 ghost1349

Поместите свой .row в div внутри footer, может быть, грести класс переопределять настройки положения.

Не:

<footer class="row"></footer>

Но:

<footer><div class="row"></div></footer>

И потом:

footer { 
    position: fixed; 
    left: 0; bottom: 0; right: 0; 
}

EDIT

Так что вам нужно Flexbox (или т Ables, Flexbox это проще, но менее обратная совместимость):

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="/">Project</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/">Home</a></li> 
        <li><a href="/Home/About">About</a></li> 
        <li><a href="/Home/Portfolio">Portfolio</a></li> 

        <li><a href="/Home/Contact">Contact</a></li> 

        <li><a href="/Home/Terms">Terms Of Service</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right hidden-xs hidden-sm"> 
        <li> 
         <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a> 
        </li> 
        <li> 
         <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a> 
        </li> 
        <li> 
         <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a> 
        </li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right hidden-md hidden-lg hidden-sm text-center"> 
        <li class="social-icons"> 
         <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a> 
         <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a> 
         <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a> 
        </li> 
       </ul> 

</div> 
     </div> 
    </div> 

    <div class="container body-content"> 

     <div class="content-wrapper"> 
     <div class="content-body"> 

     <div class="jumbotron"> 
      <h1 class="text-center">Portfolio</h1> 
     </div> 

     <div class="row"> 
      <div class="col-xs-12 col-md-4 text-center bottom-30"> 
       <h4 class="bold">PeppNation</h4> 
       <a href="http://www.peppnation.techuhost.com" target="_blank"> 
        <img src="/Assets/Images/Images/Portfolio/PeppNation.png" width="300"/> 
       </a> 
      </div> 

      <div class="col-xs-12 col-md-4 text-center bottom-30"> 
       <h4 class="bold">Brock Report - Publications Page</h4> 
       <a href="http://brockreport.com/publications.aspx" target="_blank"> 
        <img src="/Assets/Images/Images/Portfolio/BrockReport.png" width="300"/> 
       </a> 
      </div> 

      <div class="col-xs-12 col-md-4 text-center bottom-30"> 
       <h4 class="bold">Camp BASIC</h4> 
       <a href="http://campbasicdev.dev2.nsrit.com/" target="_blank"> 
        <img src="/Assets/Images/Images/Portfolio/CampBasic.png" width="300"/> 
       </a> 
      </div> 
     </div> 

     </div> 

     <footer class="content-footer"> 
       <div class="row text-center"> 
       <div class="col-xs-12 col-md-2"> 
        <h4 class="bold">TechU</h4> 
        <p><a href="/Home/Terms">Terms Of Service</a></p> 
        <p>&copy; 2016 - TechU</p> 
       </div> 

       <div class="col-xs-12 col-md-3"> 
        <h4 class="bold">Contact Information</h4> 
        <p>Phone: <strong><a href="tel:4142555423">(414) 255-5423</a></strong></p> 
        <p>Email: <strong><a href="mailto:[email protected]">[email protected]</a></strong></p> 
       </div> 

       <div class="col-xs-12 col-md-3"> 
        <h4 class="bold">Business Hours</h4> 
        <p>Monday - Friday: <strong>9 a.m. - 5 p.m. CST</strong></p> 
        <p>Saturday & Sunday: <strong>Closed</strong></p> 
       </div> 

       <div class="col-xs-12 col-md-4"> 
        <ul class="nav navbar-nav hidden-xs footer-social-button-align"> 
         <li> 
          <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a> 
         </li> 
         <li> 
          <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a> 
         </li> 
         <li> 
          <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a> 
         </li> 
        </ul> 
        <ul class="nav navbar-nav hidden-md hidden-lg hidden-sm"> 
         <li class="social-icons"> 
          <a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a> 
          <a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a> 
          <a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a> 
         </li> 
        </ul> 
       </div> 
       </div> 
     </footer> 

    </div> 

    </div> 
</body>

& CSS

html, body { 
    height: 100%; 
    padding-top: 0; 
    background-color: #cccccc; 
} 

.body-content { 
    height: 100%; 
} 

.content-wrapper { 
    display: flex; 
    flex-direction: column; 
    height: 100% 
} 

.content-body { 
    flex: 1 0 auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-top: 50px; 
} 

.content-footer { 
    flex: 0 0 auto; 
}

источник

2016-04-16 16:09:15

Так кажется, что это сработало, но не совсем так, как я хотел: http://codepen.io/sredmond/pen/revjdv есть ли способ получить этот нижний колонтитул в контейнере содержания тела? – ghost1349

Позиция фиксированная всегда привязывает элемент к окну, если вы не будете частью этого элемента, вам нужно будет использовать «абсолютный» позит. Но вам нужно помнить, что оба они независимы от других элементов, поэтому, если ваш нижний колонтитул растет по высоте при изменении ширины видового экрана - он будет перекрываться на вашем контенте. –

Вы хотите, чтобы этот нижний колонтитул фиксировался в нижней части страницы и всегда поддерживал этот контейнер содержимого содержимого? –

Проблема заключается в том, что ваш html и тег тела не расширяются до нижней части экрана, если у вас нет содержимого. Для того, чтобы ваш HTML расширить до дна добавить CSS:

html, 
body { 
    margin:0; /* removes any margin (especially at the bottom) */ 
    padding:0; /* removes any padding (especially at the bottom) */ 
    height:100%; /* will make it expand to the end */ 
}

источник

2016-04-16 16:03:56 chickahoona

Фиксированной позиции не имеет никакого отношения к высоте тела; –

Thats просто фрагмент, который я всегда использую. возможно, тело не имеет к этому никакого отношения, и только «html» достаточно хорош. Не стесняйтесь редактировать мое решение, если вы уверены. – chickahoona

Я попытался это много раз, и она отлично работает для меня.

https://css-tricks.com/snippets/css/sticky-footer/

Надеется, что это помогает :)

источник

2016-04-16 16:17:49

Нижний колонтитул не приклеивается к нижней части страницы

ответ

Смежные вопросы