Представляем:
- есть набор DIV'ов с шириной 100% и абсолютным позиционированием (хедер, футер, фон);
- есть DIV'ы с собственно контентом, с фиксированной шириной, абсолютным позиционированием, отцентрированные через left 50% и margin-left.
Почему когда сжимаешь окно браузера по ширине, появляется скролинг, чтобы отобразить фиксированную чать, а нефиксированные DIV'ы никак не растягиваются как бы я не изращался?
Как это поправить без javascript желательно.
Помогает указание fixed вместо absolute, но это не выход.
Примечание:
#header-background
{
position:absolute;
left:0px;
top:0px;
height:60px;
width:100%;
min-width:100%;
background-color:#bbdd99;
background-image: url(images/header_background.gif);
background-repeat: repeat-x;
z-index: 0;
}
...
#background {
position:absolute;
left:0px;
top:360px;
bottom: 63px;
width:100%;
background-image: url(images/background.jpg);
background-repeat: repeat;
z-index: 0;
}
#container {
position:absolute;
left: 50%;
top: 360px;
bottom: 63px;
width: 916px;
margin-left: -458px;
overflow:hidden;
z-index: 1;
}
...
#footer-background {
position:fixed;
left: 0px;
bottom:0px;
width:100%;
height:60px;
background-color:#bbdd99;
background-image: url(images/header_background.gif);
background-repeat: repeat-x;
z-index: 0;
}
...
<div id="header-background"></div>
...
<div id="background"></div>
<div id="container">
...............
</div>
<div id="footer-background"></div>
...
Примечание:
min-width:100%; - это одно из извращений...
Примечание:
2 Биополе
Вот, спасибо, помогли советом: при вёрстке слоями используй таблицы...
Примечание:
position:fixed; помогает, но это лажа...
Примечание:
2 rwt
> попробуй заменить везде position:absolute; на float: left;
Нет, становиться ещё хуже...
Примечание:
2 Биополе
Что значит основной?
Для того, чтобы вписался, придумали скроллинг.
Примечание:
2 Биополе
Задача, чтобы:
1) header, footer, background ВСЕГДА занимали всю доступную по ширине область, включая и ту, которая появляется при скроллинге container.
2) container всегда отображался по центру окна и относительно header, footer и background.
Пробовал и right 0px; вместо 100%, но всё одно и то же.
Примечание:
2 Биополе
IE по-другому слои обрабатывает, для него иногда приходится искать другое решение...
Примечание:
2 Биополе
Хотя у меня честно говоря не заработало и в Opera...
Примечание:
2 aloneloony
Спасибо, но помогло другое:
min-width:916px;
плюс ещё пошаманил с внешними контейнерами.
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.