Имя: Пароль:
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 правильно структурно изначально нарисовать.
Здесь можно обсудить любую тему при этом оставаясь на форуме для 1Сников, который нужен для работы. Ymryn