Как я могу исправить свое позиционирование CSS
Я пытаюсь сделать так, чтобы мой нижний колонтитул находился внизу страницы, заголовок вверху страницы и раздел в середине страницы. Но все, что я получаю, это красный нижний колонтитул, отображаемый в верхней части страницы. Фоновая оболочка должна быть серой, но это тоже не работает. Пожалуйста помоги. Спасибо.
Вот CSS:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
ниже тело HTML:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
5 ответов
Вы должны использовать position: absolute;, Это имеет тенденцию испортить весь ваш интервал при использовании в родительских элементах, как это. section раздел будет расположен прямо над header раздел, потому что он не был расположен вообще.
Попробуйте просто дать section минимальная высота и удаление position атрибутов.
Надеюсь это поможет.
Удалите абсолютную позицию из верхнего, нижнего и нижнего колонтитула. Я думаю, что это может быть так.
Вы были близки Заменить определение CSS на <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
Сделайте это в следующем классе в вашем коде:
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}