Сохранение нижнего колонтитула до нижней части (css)

Это похоже на популярный вопрос, но даже после включения некоторых предложений я не получаю желаемого результата.Сохранение нижнего колонтитула до нижней части (css)

У меня есть нижний колонтитул, и я хочу, чтобы это было внизу страницы. Вот мой HTML и CSS: (привет»просто заполнителем содержание)

HTML:

<body> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 

</ul> 

<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 

</body>

CSS:

.footer { 
bottom:0; 
position: absolute; 
width:100%; 

} 

body { 

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 

}

Теперь, если у меня есть position: absolute; в .footer стиле, то нижний колонтитул находится внизу на странице загрузки и остается в том же точном положении, когда вы прокручиваете вниз. Он также перекрывает содержимое, как видно из скрипта. here

Если я удалю свойство position: absolute, нижний колонтитул не находится внизу страницы и перейдет непосредственно под предыдущим элементом. См. Здесь, чтобы понять, что я имею в виду. LINK

Я хочу, чтобы это было внизу страницы. Если в возрасте есть минимальный контент, тогда он должен пройти весь путь до основания, и если перед нижним колонтитулом будет много контента, то он не должен перекрывать их и опускаться ниже всех. Решение jQuery также прекрасное.

источник

2016-09-30 Keshav Vasudevan

http://stackoverflow.com/questions/18739937/how-to-keep-footer-at-bottom-of-screen – channasmcs

Обновление ур CSS следующим

проверить выход в jsbin Link to Jsbin

.footer { 
    position:relative; 
    top:225px; 



}

.footer { 
 
\t position:relative; 
 
\t top:225px; 
 

 
    
 

 
} 
 

 
body { 
 

 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    height:100%; 
 
    min-height: 100%; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
<ul> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 

 
</ul> 
 

 
<div class="navbar navbar-default footer"> 
 
    <div class="container"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#"> Blog </a></li> 
 
     <li> <a href="#"> Terms of use </a></li> 
 
     <li><a href="#"> Contact us </a></li> 
 
    </ul> 
 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
 
    </div> 
 
</div> 
 

 
</body> 
 

 
</html>

источник

2016-09-30 03:39:27

Спасибо за ответ, но это неверно. Я хочу, чтобы нижний колонтитул был внизу, независимо от размера окна. Если сказать, что высота моего окна была больше 225 пикселей, тогда этот ответ не подтвердился бы. Спасибо, хотя за то, что нашли время ответить –

do u want fixed footer –

Нет, я хочу, чтобы это был обычный нижний колонтитул, который вы видите на таких сайтах, как stackoverflow –

У меня есть проверка кода обновление этого,

CSS

.footer { 
    bottom:0; 
    position: fixed; 
    width:100%; 
    margin-bottom: 0 !important; 
} 
.content { 
    position: relative; 
} 
body { 

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 
}

HTML

<div class="content"> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 

</ul> 
<div> 
<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 
</div>

bootply

источник

2016-09-30 04:01:25 CasperSL

Заканчивать this замечательный CodePen Крис Бракко, это будет решить вашу проблему.

/** 
 
* Demo Styles 
 
*/ 
 

 
html { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding-bottom: 6rem; 
 
    min-height: 100%; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
} 
 

 
.demo { 
 
    margin: 0 auto; 
 
    padding-top: 64px; 
 
    max-width: 640px; 
 
    width: 94%; 
 
} 
 

 
.demo h1 { 
 
    margin-top: 0; 
 
} 
 

 
/** 
 
* Footer Styles 
 
*/ 
 

 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<div class="demo"> 
 
    <h1>CSS “Always on the bottom” Footer</h1> 
 

 
    <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> 
 

 
    <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> 
 

 
    <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p> 
 

 
    <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p> 
 
</div> 
 

 
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

источник

2016-09-30 04:14:40

Вы должны использовать позицию "Fixed", но вам нужно будет дать вашему телу тег заполняющего-дно. Кроме того, navbar нуждается в нижней границе нуля.

.footer { 
    position:fixed; 
    bottom:0px; 
    width:100%; 
} 
.footer.navbar { 
    margin-bottom:0px; 
} 

body { 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 
    padding-bottom:120px; // whatever size you need 
}

Bootply: http://www.bootply.com/e1EQiagcBd

источник

2016-09-30 04:26:39 Daniel

мне понравился ваш вопрос, и я получил решение для этого, пожалуйста, скопируйте вставьте в ваш HTML, он работал для меня

/* css */ 
 

 

 
* { 
 
\t box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
\t -ms-box-sizing:border-box; 
 
\t -webkit-box-sizing:border-box; 
 
} 
 
html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t float:left; 
 
} 
 
body { 
 
\t margin:0; 
 
\t position:relative; 
 
} 
 
header { 
 
\t float:left; 
 
\t width:100%; 
 
\t padding:40px; 
 
\t background:#666; 
 
} 
 
.letter_s { 
 
\t position:relative; 
 
\t float:left; 
 
\t width:100%; 
 
\t min-height: calc(100% - 160px); 
 
} 
 
footer { 
 
\t float:left; 
 
\t width:100%; 
 
\t padding:40px; 
 
\t background:#666; 
 
}

<!-- HTML --> 
 

 
<header></header><!-- /header --> 
 

 
<div class="letter_s"> 
 
\t <p>he soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soule soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution th is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution</p> 
 
\t  
 
</div><!-- /.letter_s --> 
 

 
<footer></footer><!-- /footer-->

напечатайте больше буквы или добавьте что-нибудь, что вы можете видеть

источник

2016-09-30 04:29:23

Попробуйте дать position: relative; тегу html.

источник

2016-09-30 05:52:32

Вы можете установить гибкий распорный элемент между нижним колонтитулом и над ним. Этот распорный элемент расширяется и сжимает столько, сколько необходимо, чтобы поддерживать нижний колонтитул в нижней части страницы.

Вот HTML код с распорной DIV:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
</ul> 

<div class="spacer"></div> 

<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 

</body> 
</html>

А вот CSS:

body { 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

.spacer{ 
    flex:1; 
}

Я тестировал этот код в моем браузере Chrome, и она работает безупречно.

Вы можете прочитать больше о гибких коробках на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Добавление HTML-элемент как разделитель не может быть рекомендованной практикой для моделирования веб-страниц. Но гибкие проставки, подобные этому, обычно используются в макетах Android и iOS. Такие прокладки очень полезны для создания стабильной компоновки, которая работает со многими различными размерами экрана.

источник

2017-10-21 23:24:59 Mike

Сохранение нижнего колонтитула до нижней части (css)

ответ

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