Как растянуть див?

Question

[VladimirOne]

Сделал div для футера и прикрепил его к низу страницы. Проблема в том, что он растягивается только по содержимому,а нужно до конца родительского дива (container). Если поставить width: 100% выходит за границы родительского дива.

<div class="container border border-primary">

    <div id="navigation">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        </nav>
    </div>

    <div id="content">
        <h1>Hello, world!</h1>
    </div>
    <div id="footer" class="bg-primary">
        123
    </div>
</div>

html, body {
    height: 100%;
    width: 100%;
}

#footer{

    position:fixed;
    bottom: 0;
    
}

Так оно выглядит сейчас:

Answer 1

[Brad9aga]

как-то так


бонус

Comments

[VladimirOne]

Спасибо большое! Бонусный вариант сработал

Answer 2

[Владимир Голубь]

position: fixed, работает относительно body.

Попробуй absolute, а родителю добавь relative.

Answer 3

[Степан Крапивин]

Вместо width: 100% для элементов с position: fixed делай так:

#footer {
  position: fixed;
  left: 0;
  right: 0;
}