Имя: Пароль:
IT
Веб-мастеринг
Как на DIV сдалать две колонки левая и правая на полную высоту с отдельной прокуруткой
,
0 Said_We
 
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 правильно структурно изначально нарисовать.
Глупец, лишенный способности посмеяться над собой вместе с другими, не сможет долго выносить программирование. Фредерик Брукс-младший