Как на DIV сдалать две колонки левая и правая на полную высоту с отдельной прокуруткой

Веб-мастеринг

, , ,

19.08.21

✎

17:45

Вообще никогда не занимался версткой html (html+css), ну так - смотрел иногда.
Из спортивного интереса как-то решил проверить могу ли хоть чуть чуть читать сие счастье или совсем нет.
Оказалось совсем нет.
Решил сделать простейшую задачу - сам придумал задачу и сам её НЕ решил :-)

Задача:
Использовать только блоки <div> + CSS.
Нарисовать две области по следующим правилам:

<div class="main_block">                          // Блок на весь экран без отступов со всех сторон от границ экрана.

   <div class="left_block">Левый блок<div/>       // Левый блок привязан к левой части головного блока "main" на всю высоту экрана (и ниже), даже если всего пару строк в блоке.
                                                  // Имеет одинаковый фон на всю высоту экрана - пусть зеленый, независимо от объема заполнения как самого блока, так и правого.
                                                  // Отдельная прокрутка если содержимое этого блока не помещается на высоту экрана - например при масштабировании.
                                                  // Имеет минимальную и максимальную ширину в пикселях.

   <div class="right_block">Контент</div>         // Блок на всю оставшуюся область со своим фоном отличным от фона левого блока - пусть синий и со своей независимой от левого блока прокруткой и при необходимости.
                                                  // Имеет ограничение по максимальной и минимальной ширине. Если ширина экрана становится больше максимальной,то располагается в середине области, которая
                                                  // образована правым краем левой области и правым краем головной области "main". Если меньше,то прокрутка горизонтальная и правый край "съедается".
</div>

Никаких отступов между блоками.
Блоки друг на друга не заезжают и не перекрывают.

P.S.

Навеяла ветка:
Как обойти поведение тега "table"?

Сейчас же использование куча тегов <table> и т.д. считается плохим тоном.
Хорошим тоном считается везде использовать только один тег <div> и оформление к нему. Даже тег <span> не нужен.
Почему не знаю. Но часто встречаю именно такой стереотип.

1 sitex

naïve

19.08.21

✎

18:07

(0) Все чаще стал встречать каких ни чем не аргументированных стереотиперов от жертв ЕГЭ,и перестал замечать. Как хочу так и решаю задачи , что работает стабильно и всерьез.

2 Garykom

гуру

19.08.21

✎

18:09

(1) в случае решения на таблицах придется внутрь ячеек еще блоки вставлять - аргумент?

3 Said_We

19.08.21

✎

18:11

(1) Согласен. :-)
Но задачу в (0) именно так себе поставил. Раз только блоками можно обойтись, то обходимся только ими.

(2) Вложенных блоков <div> можно лепить сколько угодно.

4 Garykom

гуру

19.08.21

✎

18:15

(3) можно но зачем лишние?

5 Said_We

19.08.21

✎

18:21

(4) Лишние можно не вставлять. Ограничение только одно - использовать только теги: <!doctype>, <html>, <head>, <meta>, <link>, <body>, <div>.
А по сути только один тег <div>.

<!doctype>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="CSS/1.css">
    </head>
    <body>
    </body>
</html>

6 sitex

naïve

19.08.21

✎

18:22

(0) То что у тебя в тексте написано тут у тебя div в dive

7 sitex

naïve

19.08.21

✎

18:23

(5) Покажи что ли рисунком каким что нужно. ппц уже после 16 часов работы не могу понять что нужно

8 Said_We

19.08.21

✎

18:24

(6) Использовать только тег <div>, не означает, что его можно использовать только один раз. Напротив - сколько угодно раз, но только его.

9 Метрополь

19.08.21

✎

18:33

(0) Объясню почему так.
Весь HTML состоит из блоков. Называй их как хочешь, хоть div, хоть span, хоть table. По сути это одно и то же, различие только в предопределенных свойствах, которые ты можешь изменить сам. Можешь удалить у тега span его свойства, и присвоить ему свойства div, и он будет вести себя в точности как div. Точно так же можешь поступить с тегом table, он тоже может вести себя как div, без проблем. Но разница в том, что у тега table гораздо больше предопределенных свойств чем у div, которые мешают и усложняют верстку. Чтобы удалить все ненужные свойства у table, потребуется гораздо больше усилий чем настроить div так как тебе хочется. Ну или span, без разницы вообще. Просто принято именно div использовать, так повелось.

10 sitex

naïve

19.08.21

✎

18:38

(9) Это с оговоркой , грубо говоря.

11 polosov

19.08.21

✎

18:41

(9) Ну и table плохо масштабируется и вообще мобильные браузеры страдают от него.

12 Said_We

19.08.21

✎

18:43

(9) Да так то оно так, но у того же <span> по сравнению с <div> по сути одно свойство отличается = в той же строке. Я конечно совсем не специалист, но видится это именно так. Но я тоже за однообразие. Подключил другой css и сайт совсем в другом виде.

С помощью только тега <div> эта задача 100% решается. Более того даже я её на 60% решил. Отдельная прокрутка у левого блока или не работает или работает как не надо. С отступами надо было смотреть и отступы лишние сверху и сбоку. Остальное работало.

13 sitex

naïve

19.08.21

✎

18:52

(0) Конструкция дивов такая ?  <div class="main_block">
            <div class="left_block"> Левый блок</div>
            <div class="right_block">Контент</div>
</div>

14 sitex

naïve

19.08.21

✎

18:56

(0) незнаю угадал или нет , но так и непонял что нужно : применти этот CSS

.main_block {
         width: 650px;
         margin: 0 auto;
         height: 100px;
        }

.left_block {
        float: left;
        line-height: 50px;/
        font-size: 40px;
        background: green;
        color: white;
        width: 120px;
        margin-right: 10px;
        text-align: center;
        overflow-y: scroll;
}
.right_block {
        float: left;
        line-height: 50px;/
        font-size: 40px;
        background: red;
        color: white;
        width: 120px;
        margin-right: 10px;
        text-align: center;
        overflow-y: scroll;
}
.main_block :last-child {
        margin-right: 0px;
                       }

15 Asmody

19.08.21

✎

19:06

(0) yandex://css+grid

16 sitex

naïve

19.08.21

✎

19:08

(15) так сразу вышли энциклопедию по изучению - в месяцок управиться

17 Asmody

19.08.21

✎

19:11

(16) первая и вторая ссылка
https://habr.com/ru/company/macloud/blog/564182/

https://html5book.ru/css-grid/

Там всё разжевано. В комиксах, как вы любите

18 sitex

naïve

19.08.21

✎

19:13

(17) Мне это не нужно . А автор чет поставил вопрос про div.

20 Said_We

20.08.21

✎

13:15

(17) Спасибо. Хорошо разжевано - дальше некуда. Получилось с помощью грида просто, быстро, абсолютно понятное и прогнозируемое поведение.
(16) Ушло очень мало времени. Гораздо меньше времени, чем ранее со стандартным оформлением и с флексами и т.д. Более того с флексами так и не получилось до конца - случайно один раз на 99% получилось, но потом что-то убрал затер и не смог даже воспроизвести, осталось на 60%.

Я не специалист, но общее ощущение при работе с гридом по моим ощущениям это то, что я понимаю заранее как поведет себя форма. Интуитивно понятно.
+ В принципе можно расположиться блоки <div> хоть по диагонали, хоть буквой Г. При этом html останется неизменным. Главное html правильно структурно изначально нарисовать.