#css #html #height
#css #HTML #высота
Вопрос:
Итак, может быть, я просто не умею искать, но у меня возникли реальные проблемы с поиском метода для этого, так что вот так…
У меня есть веб-страница с фиксированным фоном изображения (выложенным плиткой, без прокрутки). Теперь я хочу, чтобы поверх него был цветной div (шириной 700 пикселей, высотой 100%, по центру), в который я затем мог бы поместить больше содержимого (необязательно это должен быть div, я просто хочу цветную область в центре.)
Вот изображение того, над чем я работаю: http://bit.ly/g5qgj0Слегка окрашенная область (поверх которой находится все остальное) — это то, чего я пытаюсь достичь.
Заранее спасибо, я все еще знакомлюсь с HTML / CSS, и это сводит меня с ума XP
Комментарии:
1. Второй комментарий: Вставьте свой код и что в нем не так. Мы не будем кодировать ваш сайт за вас.
2. И я бы не ожидал, что вы сделаете что-либо подобное… По сути, у меня нет никакого кода для вставки, я просто спрашиваю, какова разметка, чтобы иметь объект без содержимого, который все еще может иметь 100% высоту и фиксированную ширину. (Чтобы уточнить, изображение, которое я опубликовал, это просто изображение. Нет кода. Сейчас я работаю над реализацией того, что вы видите в реальном CSS и HTML.)
Ответ №1:
html, body{
margin:0;
padding:0;
height:100%;
}
body{
background:transparent url(...) repeat 0 0;
}
div{
margin:0 auto;
width:700px;
height:100%;
background:white;
}
Проверьте рабочий пример на http://jsfiddle.net/TGt4A /
Ответ №2:
Я думаю, что ваш самый надежный способ сделать это — задействовать Javascript / jQuery, что я и сделал в JSFiddle. Возможно, вы захотите добавить CSS min-height для этого #container в качестве запасного варианта, если Javascript отключен или что-то еще.
Комментарии:
1. Хм, интересно! Без реализации предоставленного вами Javascript я попробовал использовать just:
#container { margin: 0px auto; width: 765px; min-height:100%; background-color:#e7eef3; padding:0; }но размер div по-прежнему равен размеру содержимого внутри него.2. Ах! Добавлен
height=100%;вbodyиhtml, и теперь все работает так, как я хотел, даже без Javascript. Большое спасибо! 🙂