#html #css #layout
#HTML #css #макет
Вопрос:
Мне интересно создать макет css с верхним, нижним колонтитулом и div #main, предназначенный для одностраничного приложения / сайта. Я ищу поддержку всех основных браузеров IE9 и выше, а также всех мобильных браузеров / мобильных веб-просмотров (для гибридных приложений).
Мне нужно, чтобы заголовок находился в верхней части окна (достаточно просто), нижний колонтитул — в нижней части окна (довольно сложно, но не слишком сложно), а div #main между ними соответствовал точной высоте, которую они не занимают, ибыть «прокручиваемым». Загвоздка в том, что я бы хотел, чтобы размеры шрифтов внутри верхнего и нижнего колонтитулов немного различались на разных устройствах и браузерах, поэтому я не могу установить их высоту (не так ли?). И если это так, я не могу установить высоту div#main, что действительно затрудняет его размещение.
Любая помощь будет потрясающей!
Ответ №1:
Вы можете использовать position: absolute; и указывать высоту нижнего колонтитула и заголовка в % ; сделайте overflow: hidden для них и overflow: auto для содержимого div, присвоите top и bottom равную ширине верхнего и нижнего колонтитулов.
ДЕМОНСТРАЦИЯ
css
body {
height:100%;
width:100%
}
#header {
background: gray;
position:absolute;
top:0px;
left:0px;
height:10%;
right:0px;
overflow:hidden;
text-align: center;
}
#content {
background: #333;
position:absolute;
top:10%;
bottom:10%;
left:0px;
right:0px;
overflow:auto;
text-align: center;
}
.test {
height: 200px;
width: 200px;
margin: auto;
background: red;
text-align: center;
}
#footer {
background: grey;
position:absolute;
bottom:0px;
height:10%;
left:0px;
right:0px;
overflow:hidden;
text-align: center;
}
HTML
<div id="header">Header</div>
<div id="content">
<p>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</p>
<div class="test">
test div
</div>
<p>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</p>
</div>
<div id="footer">Footer</div>
Комментарии:
1. Да, это то, что я в итоге сделал, спасибо, Гаурав! Единственная проблема с этим заключается в том, что у некоторых мобильных браузеров возникают проблемы с прокруткой внутри divs, кажется, что проблемы с кроссбраузерностью становятся все более безумными 🙂
Ответ №2:
Если вы используете position: fixed верхний и нижний колонтитулы, они всегда будут отображаться в верхней и нижней части экрана. Вам нужно будет поместить панель вверху и внизу основного текста, чтобы скрыть его части; использование нефиксированных копий верхнего и нижнего колонтитулов visibility: hidden должно работать.
Пример:
<!DOCTYPE html>
<html>
<head>
</head>
<body style="margin: 0;">
<div style="position: fixed; top: 0;">Header</div>
<div>
<div style="visibility: hidden">Header</div>
Lorem ipsum dolor sit amet
<div style="visibility: hidden">Footer</div>
</div>
<div style="position: fixed; bottom: 0;">Footer</div>
</body>
</html>
Комментарии:
1. По умолчанию используется значение Static. Мне нужно, чтобы они были прикреплены к верхней и нижней части окна, а не к документу html. Отредактировал мой вопрос, чтобы уточнить.
2. Исправлено не поддерживается во многих мобильных браузерах. Что действительно отстой. Плюс это не помогает моей проблеме с высотой. Я должен сделать это, не сообщая нижнему колонтитулу или div #main, какой конкретной высоты они должны быть.
3. Слишком плохо о мобильных браузерах. Но вам не нужны размеры для верхнего, нижнего или основного колонтитула, если вы используете трюк с невидимым копированием, как я описал. Например, см. Мое редактирование.