В основном у меня есть вложенный <div> как нижний колонтитул, а родительский div имеет размер в 1000 пикселей.
Мне было интересно, можно ли расширить ширину нижнего колонтитула так, чтобы он вышел из родителя, чтобы соответствовать ширине браузеров, но все еще сохраняет свое место в родительском?
Мое решение предполагает, что элемент .parent имеет растянутую высоту. даже если это не так, то, похоже, вы хотите, чтобы элемент .footer находился в нижней части страницы. Если это так, то с помощью position:absolute вы можете вывести дочерний блок из родительского блока, а затем привязать его к нижней части с помощью bottom: 0px, а затем растянуть его ширину, используя left:0px и right: 0px.
ОБНОВЛЕНО
Используйте это объявление Doctype:
<!DOCTYPE html>
Кроме того, в элементе .footer упоминается свойство top:auto css. Что-то вроде этого:
.footer{
padding: 0px 15px;
height: 50px;
background-color: #1A1A1A;
position:absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: auto; /* added (IE FIX) */
}
Что-то, что сработает для вас:
.parent{
width: 300px; /* your parent width */
}
.footer{
height: 50px; /* your footer height */
position:absolute;
left: 0px;
right: 0px;
}
Вы можете установить положение нижнего колонтитула в относительное и установить для свойства left значение -100px и ширину до 1200px, например.
Лучше все еще не иметь его в родительском div, иметь его как свой собственный div с его набором собственных значений.
Сделайте это как
HTML
<div id="parent" class="wrap"></div>
<div id="footer"></div>
CSS
.wrap{width: 1000px;}
#footer{width: 100%;}
Попробуйте этот CSS.
#footer {
position:absolute;
bottom:0;
width:100%;
}
Попробуйте этот css, это определенно будет работать так, как вы хотите
html,body{
height: 100%;
padding: 0px;
margin: 0px;
}
.parent{
width: 400px;/*put your width here*/
height: 100%;
background-color: #ccc;
margin: 0 auto;
}
.footer{
padding: 15px 0px;
height: 30px;
background-color: #000;
position:absolute;
bottom: 0px;
left: 0px;
width:100%
}