Нижний колонтитул не позиционируется должным образом, несмотря на кажущийся правильный CSS [дубликат]
Это очень распространенная операция в разных программах и платформах. Подчеркнутый означает, что вы находитесь в режиме Overwrite, что означает, что все, что вы набираете , перезапишет текст в позиции курсора .
Курсор «нормальный» указывает, что вы находитесь в режиме вставки и весь текст, который вы набираете , заставит остальную часть линии двигаться дальше .
Переключение между этими режимами происходит, нажимая кнопку Insert на клавиатуре (обычно есть два из них, один где-то выше клавиш со стрелками, а другой - на Num Pad).
6 ответов
Проверьте этот сайт . У него хороший учебник о том, как это сделать с помощью css.
Я скопировал его css на всякий случай, когда сайт Мэтью снят.
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
EDIT
Поскольку высота нижнего колонтитула отличается от страницы к странице, вы можете получить высоту нижнего колонтитула, а затем отрегулировать нижнюю часть #body с помощью javascript , Вот пример использования jquery.
$(function(){
$('#body').css('padding-bottom', $('#footer').height()+'px');
});
-
1– at. 12 November 2012 в 21:02
HTML
<body>
<div class="example">
<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>
</body>
CSS
body {
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
использует свойство min-height, хотя и не полностью надежное, поскольку некоторые более старые версии могут его не поддерживать. Бросьте в javascript, если вы не возражаете.
-
1– at. 12 November 2012 в 21:02
Попробуйте эту попытку .
Это копия стилей, которые использует Github, чтобы сохранить нижний колонтитул внизу страницы. Он немного взломан и требует знать высоту вашего нижнего колонтитула (что может не сработать для вашего использования)
Пометка
<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>
<footer>
<p>footer-text</p>
<img src="http://placekitten.com/100/100" alt="footer image">
</footer>
CSS (хорошо , scss)
// our page element
html {
height:100%;
}
body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}
.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}
footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}
Важными здесь являются:
- Настройка высоты: 100% на содержащих элементах (esp
htmlиbody]) - Зная высоту нижнего колонтитула и учитывая его с помощью элемента «push»
- , используя комбинацию
min-heightheight: auto !importantиheight:100% ]
Надеюсь, что это поможет!
Учитывая, что весь ваш нижний колонтитул находится внутри тега <footer> html , это простое решение с использованием jQuery.
JS:
$(document).ready(function(){
$('body').css('padding-bottom', $('footer').height()+'px');
});
CSS:
footer {
position:absolute;
bottom:0;
}
Нет, это очень просто установить минимальный для вашего роста.
вот так: min-height: 500px; то минимальная высота составляет 500 пикселей.
-
1– at. 12 November 2012 в 21:01