|
Как на 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 правильно структурно изначально нарисовать. |
Форум | Правила | Описание | Объявления | Секции | Поиск | Книга знаний | Вики-миста |