http://codepen.io/RobbyT15/pen/otyfw/
Я работаю над дизайном сайта, и я пытаюсь сделать динамический нижний колонтитул, который остается в нижней части окна независимо от размера экрана. Использование фиксированного атрибута в CSS не работает, поскольку оно не прокручивается со страницы. Однако я сделал что-то подобное с плавающим div, но когда я попытался включить его в нижний колонтитул, это не сработает. Я просмотрел другие подобные вопросы, но каждый из них говорит, чтобы добавить position: fixed
правило CSS. Какие-либо предложения?
Редактирование * Я сделал изменения, которые все предложили, однако, нижний колонтитул не прикрепляется к нижней части окна. Извините, что я испытываю такую боль.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Robert Thompson</title>
<link rel="stylesheet" href="styles/desktop.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="includes/init.js"></script>
<script type="text/javascript" src="includes/main.js"></script>
</head>
<body>
<div id="main">
<header></header>
<div id="content">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<footer></footer>
</div>
</body>
</html>
CSS
body{
position: relative;
margin: 0;
padding: 0;
background-color: #757575;
color: #FFFFFF;
z-index: 0;
}
header, footer{
position: relative;
display: block;
width: 100%;
height: 50px;
background-color: #000000;
z-index: 2;
}
header{
border-bottom: 3px inset #DDAA00;
}
footer{
border-top: 3px outset #DDAA00;
}
#main{
position: absolute;
background-color: red;
z-index: 1;
}
#content{
position: relative;
left: 250px;
width: 70%;
z-index: 1;
}
Вам нужно будет использовать относительное положение и абсолютное. Таким образом, к вашему контейнеру (телу страницы) добавьте position: relative
а затем в нижний колонтитул вы добавите position: absolute
отсутствие необходимости в маржировании. Также загляните в CSS Sticky Footer, как TylerH указал вам тоже.
Взгляните на это: http://codepen.io/sheriffderek/pen/ziGbE
Это сочетание нескольких липких вариантов нижнего колонтитула - и некоторый дополнительный javascript для динамического изменения в зависимости от фактического содержимого нижнего колонтитула (который может отличаться при разных размерах экрана)
div
и нижнего колонтитула в отдельномdiv
.margin-top
иmarginTop
, если вы измените второй наmargin-top
он, вероятно, будет работать