Как сделать так, чтобы нижний колонтитул растягивался по вертикали?
У меня есть нижний колонтитул размером 1 x 70 пикселей, который установлен в качестве фона и плитки по горизонтали.
В случаях, когда веб-страница не содержит большого количества контента, она будет отображать нижний колонтитул выше того места, где должен быть нижний колонтитул. Я хочу, чтобы он закрашивался сплошным цветом, чтобы при прокрутке вниз не отображался нижний колонтитул, а затем белый цвет под нижним колонтитулом.
Вот мой стиль нижнего колонтитула.
.footer{
background:#055830 url('/images/footer_tile.gif') repeat-x top left;
color:#fff;
font-size:12px;
height: 70px;
margin-top: 10px;
font-family: Arial, Verdana, sans-serif;
width:100%;
}
Я хочу, чтобы нижний колонтитул выглядел так:
Ответы 5
Вы можете использовать
position:absolute;
bottom: 0;
чтобы нижний колонтитул всегда был внизу ...
Попробуйте следующее:
.footer{
background:#055830 url('/images/footer_tile.gif') repeat top left;
color:#fff;
font-size:12px;
height: 100%;
margin-top: 10px;
font-family: Arial, Verdana, sans-serif;
width:100%;
}
Я изменил две вещи: фон установлен на «повтор», а не просто «повтор-x», так что он также будет повторяться вниз. Высота установлена на «100%», что должно заставить его расшириться, чтобы заполнить доступное пространство.
Уточните пожалуйста - хотите ли вы сплошной зеленый цвет внизу? Если так, просто установите зеленый фон для тела ...
body {
background-color:#060;
}
Это должно дать вам результат на втором снимке экрана. Измените цвет, чтобы он соответствовал нижней части вашего градиентного изображения.
Если вы хотите, чтобы ступня была прижата к низу, используйте указанное абсолютное позиционирование и установите фон в соответствии с верхом градиентного изображения.
Вы можете изменить свой стиль тела, чтобы нижний колонтитул гармонировал с ним.
body {
background: rgb(173, 173, 173);
}
.footer{
background:#055830 url('/images/footer_tile.gif') repeat top left;
color:#fff;
font-size:12px;
margin-top: 10px;
font-family: Arial, Verdana, sans-serif;
width:100%;
position:absolute;
bottom: 0;
}
Я пробовал абсолютное положение с установкой дна на ноль, вот экран того, что он сделал.
Он отображает пустое пространство между нижним колонтитулом и серединой столбца. альтернативный текст http://img266.imageshack.us/img266/7051/picture4vb3.jpg
Я считаю, что это плохое удобство использования с длинным контентом, который должен прокручиваться снизу ... вы можете установить нижнее поле для контента, чтобы оно никогда не было полностью закрыто, но это просто не работает должным образом.