CSS - Сброшенный нижний колонтитул в нижней части страницы

Моя цель состоит в том, чтобы нижний колонтитул находился внизу страницы, если имеется мало контента, и перемещается в нижней части всего содержимого, если на странице много контента (требуется прокрутите вниз).CSS - Сброшенный нижний колонтитул в нижней части страницы

Я прочитал это сообщение Flushing footer to bottom of the page, twitter bootstrap, попробовал макет и css, но все еще не может показаться, что моя страница работает правильно.

Это мой макет кода - может быть, я просто сделал небольшую ошибку?

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     // Header Stuff 
    </div> 

    <div class="container"> 
     <div class="jumbotron"> 
      // h2 
     </div> // end jumbotron 

     <div class="row"> 
      //ALL OF THE INFORMATIONAL CONTENT 
     </div> //end row 
    </div> //end container 

    <footer class="footer"> 
     //INFORMATION/LINKS 
    </footer> //end footer 
</body>

и с изменениями имен в коде CSS ...

html, body { 
    height: 100%; 
} 

.container { 
    min-height: 100%; 
} 

.row { 
    overflow:auto; 
    padding-bottom:150px; /* this needs to be bigger than footer height*/ 
} 

.footer { 
    position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both; 
    padding-top:20px; 
}

источник

2014-01-30 Rygh2014

попробовать это ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 
.footer, .push { 
    height: 4em; 
} 
</style> 
</head> 

<body> 
<div class="wrapper"> 
    <p>Your website content here.</p> 
    <div class="push"></div> 
</div> 
<div class="footer"> 
    <p>Copyright (c) 2008</p> 
</div> 
</body> 
</html>

источник

2014-01-30 03:28:49 kyawagwin

Я думаю, CSS Flexbox может помочь вам в этом. Но, остерегайтесь поддержки браузеров.

HTML:

<body class="Site"> 
    <header>...</header> 
    <main class="Site-content">...</main> 
    <footer>...</footer> 
</body>

CSS:

.Site { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

.Site-content { 
    flex: 1; 
}

демо: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Нажмите на Перемешать содержание Кнопка прямо там, чтобы увидеть разницу.

источник

2014-01-30 03:32:50

CSS - Сброшенный нижний колонтитул в нижней части страницы

ответ

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