Как растянуть чат на всю страницу?

Question

[JustScript88]

Добрый день! Вот разметка!

<div id="container">
        <div class="header">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="aside">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat qui aspernatur laboriosam, debitis excepturi dolore reprehenderit dolorum veritatis itaque voluptates dolorem! Deleniti quibusdam molestias architecto, earum excepturi delectus
                sit. Alias quia dicta unde eveniet, maxime vitae id excepturi totam reprehenderit, iure quasi iusto at enim numquam cumque illum, ullam dolores blanditiis. Iste, enim, illum modi praesentium ex architecto voluptas est magnam eos sit excepturi
                pariatur, ea labore?</p>
        </div>
        <div class="main">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla ut ad voluptatum! Culpa quos dignissimos laudantium id, cupiditate magnam voluptate eveniet aliquam dolor reprehenderit velit tenetur distinctio corrupti facilis doloremque enim
            </p>
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>

* {
            box-sizing: border-box;
            height: 50px;
            margin: 0%;
            padding: 0%;
        }
        
        body {
            height: 100%;
            width: 100%;
        }
        
        div {
            text-align: left;
        }
        
        .header {
            border: 1px solid gray;
            font-size: 2em;
        }
        
        .aside {
            border-right: 1px solid gray;
            height: 200px;
            overflow-y: auto;
            width: 200px;
        }
        
        .main {
            position: absolute;
            left: 200px;
            top: 50px;
            height: 200px;
            overflow-y: auto;
        }
        
        .footer {
            border: 1px solid gray;
            height: 100px;
        }

Подскажите, как растянуть то на весь экран? Чтобы футер был внизу страницы, соответственно aside и main занимал всю страницу. Спасибо заранее

Comments

[Самвел Арутюнян]

Здравствуйте, я не совсем понял, что именно вы хотите растянуть на весь экран?

[Артем Масиков]

samdeweb, Поддерживаю

[JustScript88]

samdeweb, мне надо, чтобы мой чат был растянут на всю страницу)) Так, он у меня только на половину! Просто, мне надо,чтобы футер, aside и main имели фиксированную ширину и при этом чат должен занимать все окно страницы

[Eugene Chefranov]

JustScript88, что из этого всего чат?)

[JustScript88]

Eugene Chefranov, div.container)))

Answer 1

[Рома Зварич]

JustScript88 ,
1) Вы вторую колонку делаете абсолютно позиционированной. Это неправильно.
2) Много лишних свойств используете.
3) Много ошибок по вёрстке

Ознакомьтесь с технологией Flexbox. Вот пример, как с помощью неё сделать Ваш макет.
https://codepen.io/hisbvdis/pen/JgOzax

Comments

[JustScript88]

Рома Зварич, Ого! Спасибо Вам большое! Вы можете посоветовать, как мне улучшить свои навыки в плане верстки? столько информации, JS, css, препроцессоры...тупо теряешься! Просто, мне сказали, что надо знать основы HTML и CSS, чтобы изучать JS, а теперь я понимаю, что без CSS и HTML тугою Я то уже JS учу! Если бы я знал, выучил бы сначала CSS и HTML.

[Рома Зварич]

JustScript88, в интернете (на YouTube, на торрентах) хватает разных видео и курсов по верстке. Платных и бесплатных. Пытаться искать те, которые понравятся и из которых Вы можете почерпнуть что-то новое.

[JustScript88]

Рома Зварич, и параллельно учить JS? Надо было бэк - энд выбирать))