Вход | Регистрация
 

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

Как на DIV сдалать две колонки левая и правая на полную высоту с  отдельной прокуруткой
Я
   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> не нужен.
Почему не знаю. Но часто встречаю именно такой стереотип.
   sitex
 
1 - 19.08.21 - 18:07
(0) Все чаще стал встречать каких ни чем не аргументированных стереотиперов от жертв ЕГЭ,и перестал замечать. Как хочу так и решаю задачи , что работает стабильно и всерьез.
   Garykom
 
2 - 19.08.21 - 18:09
(1) в случае решения на таблицах придется внутрь ячеек еще блоки вставлять - аргумент?
   Said_We
 
3 - 19.08.21 - 18:11
(1) Согласен. :-)
Но задачу в (0) именно так себе поставил. Раз только блоками можно обойтись, то обходимся только ими.

(2) Вложенных блоков <div> можно лепить сколько угодно.
   Garykom
 
4 - 19.08.21 - 18:15
(3) можно но зачем лишние?
   Said_We
 
5 - 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>
   sitex
 
6 - 19.08.21 - 18:22
(0) То что у тебя в тексте написано тут у тебя div в dive
   sitex
 
7 - 19.08.21 - 18:23
(5) Покажи что ли рисунком каким что нужно. ппц  уже после 16 часов работы не могу понять что нужно
   Said_We
 
8 - 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 использовать, так повелось.
   sitex
 
10 - 19.08.21 - 18:38
(9) Это с оговоркой , грубо говоря.
   polosov
 
11 - 19.08.21 - 18:41
(9) Ну и table плохо масштабируется и вообще мобильные браузеры страдают от него.
   Said_We
 
12 - 19.08.21 - 18:43
(9) Да так то оно так, но у того же <span> по сравнению с <div> по сути одно свойство отличается = в той же строке. Я конечно совсем не специалист, но видится это именно так. Но я тоже за однообразие. Подключил другой css и сайт совсем в другом виде.

С помощью только тега <div> эта задача 100% решается. Более того даже я её на 60% решил. Отдельная прокрутка у левого блока или не работает или работает как не надо. С отступами надо было смотреть и отступы лишние сверху и сбоку. Остальное работало.
   sitex
 
13 - 19.08.21 - 18:52
(0) Конструкция дивов такая ?  <div class="main_block">
            <div class="left_block"> Левый блок</div>
            <div class="right_block">Контент</div>
</div>
   sitex
 
14 - 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;
                       }
   Asmody
 
15 - 19.08.21 - 19:06
(0) yandex://css+grid
   sitex
 
16 - 19.08.21 - 19:08
(15) так сразу вышли энциклопедию по изучению - в месяцок управиться
   Asmody
 
17 - 19.08.21 - 19:11
(16) первая и вторая ссылка
https://habr.com/ru/company/macloud/blog/564182/

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

Там всё разжевано. В комиксах, как вы любите
   sitex
 
18 - 19.08.21 - 19:13
(17) Мне это не нужно . А автор чет поставил вопрос про div.
   Said_We
 
20 - 20.08.21 - 13:15
(17) Спасибо. Хорошо разжевано - дальше некуда. Получилось с помощью грида просто, быстро, абсолютно понятное и прогнозируемое поведение.
(16) Ушло очень мало времени. Гораздо меньше времени, чем ранее со стандартным оформлением и с флексами и т.д. Более того с флексами так и не получилось до конца - случайно один раз на 99% получилось, но потом что-то убрал затер и не смог даже воспроизвести, осталось на 60%.

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

Список тем форума
 
ВНИМАНИЕ! Если вы потеряли окно ввода сообщения, нажмите Ctrl-F5 или Ctrl-R или кнопку "Обновить" в браузере.