Может ли вложенное Div игнорировать родительскую ширину Div?

В основном у меня есть вложенный <div> как нижний колонтитул, а родительский div имеет размер в 1000 пикселей. Мне было интересно, можно ли расширить ширину нижнего колонтитула так, чтобы он вышел из родителя, чтобы соответствовать ширине браузеров, но все еще сохраняет свое место в родительском?

enter image description here

Ответы

Ответ 1

Мое решение предполагает, что элемент .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) */
}

Ответ 2

Что-то, что сработает для вас:

.parent{
    width: 300px; /* your parent width */
}
.footer{
    height: 50px; /* your footer height */
    position:absolute;
    left: 0px;
    right: 0px;
}

Демо

Ответ 3

Вы можете установить положение нижнего колонтитула в относительное и установить для свойства left значение -100px и ширину до 1200px, например.

Лучше все еще не иметь его в родительском div, иметь его как свой собственный div с его набором собственных значений.

Ответ 4

Сделайте это как

HTML

<div id="parent" class="wrap"></div>
<div id="footer"></div>

CSS

.wrap{width: 1000px;}
#footer{width: 100%;}

Ответ 5

Попробуйте этот CSS.

#footer {
    position:absolute;
    bottom:0;
    width:100%;
}

Ответ 6

Попробуйте этот 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%
}