Какой же CSS извращенный

Console на jsfiddle во всех браузерах элемент с абсолютным позиционированием, поверх вьюпорта.

На твоём скриншоте что-то не заметно что поверх, внезапно. Выделенный элемент заканчивается на Console. Это тоже так задумано - выделять 80 пикселей и писать что это 100? :)

Вопрос вот в чем. Как ты умудрился дожить до своих седин таким идиотом?

То, что вебмакака считает меня идиотом - весьма лестно, вообще-то. Я бы даже наверно оскорбился, если бы кто-то подобный счёл мой интеллект тождественным своему.:)

Работает только с конкретным прямым указанием высоты header и footer

4.2 же

overflow: auto; надо чтобы скролл был

Не надо, а то ты бы сказал, что только благодаря этому всё и работает и что тебе нужно без скролла.

примерно 20 пикселей куда-то внезапно просрались

Примерно 20 пикселей - это jsfiddle console, отключи в настройках если размер блока линейкой меряешь.

Это тоже так задумано - выделять 80 пикселей и писать что это 100? :)

Зачем ты продолжаешь позориться, рассказывая всем, что не имееешь представления о том, как работает devtools и инспекция элементов?

В общем, ладно. Этот троллинг твоей тупостью зашел слишком далеко. Твоя взяла. Живи с этим.

4.2 же

Только Firefox и Chrome. Safari и IE11 - херня. Safari у меня правда только 10, может поновее и прожуёт.

Примерно 20 пикселей - это jsfiddle console, отключи в настройках если размер блока линейкой меряешь.

Это я уже понял.

В чём кривизна флекса?

Кроме хрома уже где-то хоть 80% фич поддерживаются?

это же после каждого чиха придётся высоту править.

Не чихай так часто.

Кроме хрома уже где-то хоть 80% фич поддерживаются?

https://caniuse.com/#feat=flexbox

Блин, ты хочешь от текстовой верстки

А мне тут постоянно втирают, что это вершина удобства программирования UI...

Так оно и есть. Ничего удобнее и функциональнее человечество еще не придумало.

Ну почему же. Ещё удобнее и функциональнее в медицине - удаление гланд через жопу автогеном.

Ты можешь сколько угодно противиться реальности. Странно лишь то. что все такие противники - не занимаются тем, чему противятся. И никак не могут иметь объективного взгляда. Как и ты - не занимаешься разработкой и программирование UI. Это если говорить о стороне разработчика. А сли говорить о стороне пользователя - то успех веб-платформы говорит сам за себя. Мнения же маргиналов с шапочками из фольги и криворуков у которых браузеры внезапно жрут гигабайты на две вкладки, просто погрешнсость, которая не учитывается.

Привет, телепат.
Я как раз занимаюсь (правда, периодически) разработкой UI под веб и кордову.
И мне нравятся ionic и angular - но всё равно, в кастомных виджетах, для сохранения адаптивной вёрски в элементах с canvas, мне нужно вешать вотчер на изменение размера документа и перерисовывать canvas.
И у меня всё потребляет очень мало памяти и не лагает, в отличии от поделок на React.
И программирование через жопу остаётся программированием через жопу, даже на C++ в mfc с коллбэками это проще и прямее.
А со стороны пользователя - веб-интерфейс google mail доставляет неконсистентностью. И, например, как мне быстро посмотреть почту, полученную 6 месяцев назад? Скролла по всей почте нет, только листать экраны.
Веб - это, если хотите, аналог latex или pdf в первую очередь. Поэтому интерактивный ui на этой технологии всегда будет черезжопным, а позиционирование будет уезжать, как у автора топика.

Ого, внезапно - canvas еявляется растровым, вот это новости. А где иначе? И что тебе меашет использовать вектор, вместо растра, разработчик?

веб-интерфейс google mail Как отедельный примеры каких-то приложений, говорят о технологии в целом? Почему ты не приводишь в пример UI какого-нибудь вк, который летает и консистентен чуть более, чем весь?

У автора топика, как и у тебя постоянно, что-то куда-то уезжает только потому, что он не разбирается в технологии, пытается сделать наскоком и методом тыка. Но это не самое страшное. Самое страшное, на примере тебя, что и разбираться и изучать ты никакого жедания не имеешь.

Гриды, флексы, жээсы...

Во:

* {
    margin: 0;
    padding: 0;
}
.container {
    box-sizing: border-box;
    position: absolute;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    background: #ff0;
    border-top: solid 100px #000;
    border-bottom: solid 100px #000;
}

<body>
    <div class="container"></div>
</body>

Скорее, у тебя не возникает случаев хитровыдуманных виджетов.

Регулярно. И никакх сложностей с их реализацией нет.

Ок, виджет аплоадера картинок с редактором типа инстаграмма как в адаптивной вёрстке реализуешь? И чтоб при ресайзе не ехало. Не ехало - это ещё чтобы координаты внутри canvas не ехали, и содержимое масштабировалось.

Это слишком абстрактное ТЗ. Такой виджет есть все в том же вк, в чем проблема, и что там куда едет при ресайзе? Заканчивая тем, что такие виджеты просто не делаются адаптивными сами по себе, а там где подобная функциональность нужна - аля фотошоп - есть webgl.

Мне ничего не мешает, кроме парадигмы вёрстки бесконечной газетной полосы. Для UI это бред и извращение.

Эта парадигма только у тебя в голове. Вот в чем дело.

А ничего никуда не едет, только для этого нужна борьба с html документом вместо программирования. Потому что каждая фигня в интерфейсе остаётся куском html документа, и ведёт себя как кусок html документа, и приходится обмазывать его кучей css и js, чтобы он не вёл себя как кусок html, а вёл себя как обычный виджет из библиотеки UI.

Если тебе нужно зумить свой растровый канвас, используй css transform. Адаптивно, на здоровье. Без потери координат.

Только потому, что ты никакой другой парадигмы работы с лэйаутом, кроме как работы с html не знаешь. На дворе давно тюрьинг полный css, web components = custom elements \ shadow dom, а ты все о каком-то html. Проблема только у тебя в голове, из-за нежелания или неспособности изучать новое.

Под капотом всё равно html - и в тексовых полях скайпа непомещающиеся переводы вызывают малипусенькие скроллбары. Которые, видимо, надо было отключать в css. Что не ложится на новую парадигму работы лэйаута и поэтому было про..но программистом.
PS. Гриды недавно появились.

Под каопотом не может быть никакого htmlпо определению. Уже на этом этапе можно сделать выводы о твоей компетенции. Весь веб UI это иерархия компонент + их стилизация + динамика. Иерархия и стилизация описывается декларативно. HTML и CSS именно такие декларативные языки для описания.

В любом тулките у тебя есть эта самая иерархия компонент и их стилизация. А там где нет - это говно прибитое гвоздями, где каждый кастомный виджет именно что приходится рисовать с нуля практически битмапом на канвасе. И все равно в конечном счеты ты изобретешь тот же DOM и CSSOM.

И такое бывает, видел даже где-то. :) Ещё поверх верхнего border абсолютно позиционированный div с текстом :)

Зато даже в ишаке работает. А не эти вот смузихрени модные.

В любом тулките у меня компоненты не стилизованы по умолчанию выглядеть и вести себя как текстовый документ с гиперссылками.

И чем ишак не смузихрень своего времени? Синдром утенка налицо. О том, что он сейчас занимает меньше одного процента на рынке нужно говорить? Ты иди еще ПО пиши под все существующие архитектуры сразу, а не под целевые.

чем ишак

Тем, что в те времена он был в ТЗ.

меньше одного процента

В те времена могильные телефоны были примерно в той же ситуации.

На остальное, что ты там себе выдумал — мне насрать. Синдром походу у тебя.

под все существующие архитектуры сразу

Этим занимаются конпеляторы и тулкиты. ЛивнИ.

Да-да, утенок как он есть.

аплоадера картинок с редактором типа инстаграмма

Это про обрезание картинки до квадрата и размещение на ней подписей и значков в произвольном месте? Так это «в векторе» даже проще делается, чем на канве. Прост координаты в процентах хранишь и готово.

Зато даже в ишаке работает

Ага, ага. А ещё нужно жить в пещере и ездть на лошадях. Диды жили и мы проживём! Это всем доступно, в отличие от квахтир и ахтомобилей новамодных. Ишь чё понавыдумывали, демоны окаянныя!

Так, подробнее!
Как растровая картинка становится вектором?
Или ты имеешь ввиду, не привязываться к размеру? Oh whait... Спасибо!
Но речь шла о том, что если в процессе сделать ресайз окна с этим, это выглядит отстойно и canvas надо перерисовывать.

Ты можешь привести MVP такого виджета, который ты хочешь? Абстрактный апплоадер в вакууме с возмозможностью редактирования изображения - вообще может не требовать канваса для визуализации изменений. Все изменения могут визуализироваться векторными примитивами, а канвас использрваться лишь раз для сведения изображения в конце.

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

Демку рабочую присылай, пусть хоть неполноценную с пояснениями что и как по-твоему должно работать, но работает сейчас не так. Никто копаться в сорцах, ради того, чтобы понять что ты хочешь не будет.

Ок. Но я его реализовал, а ресайз вотчером контролирую. Но сервер сейчас лежит.

Как растровая картинка становится вектором?

Результирующая картинка - это набор слоёв, у каждого задать позицию и масштаб в процентах (и поворот в радинах, например). Сами слои это надписи или картинки. Картинки могут быть как векторными, так и растровыми – вообще без разницы. Вот тебе и «вектор.»

если в процессе сделать ресайз окна с этим, это выглядит отстойно и canvas надо перерисовывать.

Ресайз в чём заключается? Пропорционально увеличить размер картинки если юзер как бы зашёл с мобилки (или просто скукожил окно)? Каждый слой можно завернуть в контейнер и менять какой-нибудь базовый масштаб через @media, например. Всё само и перерисуется. А канвас не нужен.

WindowsForms в VisualStudio лучше для рисования не свистопердящего UI, чем веб. Конечно, всякие GTK-поделки ещё менее пригодны для рисования UI. Говорю как человек, который начинал с формошлёпства на C#.

Хера ты тут навыдумывал.

Хотя... Сижу сейчас в деревне. Деревянный дом. Есть и газ и печка на дровах. Огород. Колодец. Рядом ключевая речушка, лес. А у соседа лошади есть. Отключи меня от «благ» цивилизации — я не пропаду. На ЛОР вот только не зайду.

А ты и дальше сиди, выделывайся, в бетонной коробке, зависимый от одного пшика судьбы.

Да, блджад, скажи еще ты в

.v-flex 100vh
  .toolbar
  .h-flex
    .side
      .header
      .content
    .main
       .header
       .content

Сможешь в вертикальный скролл .content-ов с первого раза. Зная модель, очевидно же что надо: <предложить метод решения без гугла и тыка не обосравшись, или идти мести улицы>. Тебе такое задай на интервью, ты даже не сможешь сказать, в чем проблема собственно.

Или может ты сможешь заставить грид переносить строки в медиа принте? Для печати кучи стикеров например в три колонки. Какая проперть за это отвечает и почему не работает? А?

Ты простая макака, которая лепит сайты в 12 колонок и три брейкпоинта и считает, что она что-то там авесоме и какой-то опыт имеет с задачами. Для нормальной системы расположения не нужен сакральный опыт и знание сотен приемов. Для нормальной системы нужна нормальная базовая геометрия, из которой все логично вытекает без особых знаний, небомжовские способы распределения места, request/allocate-лайк цикл размещения, и стандартные контейнеры, которые не сосут не в одном, так в другом, на одну проперть смотрят, на другую не смотрят. Но создатели цсса поехавшие наркоманы, и каждый новый запил фич нормальные люди встречают десятками фейспалмов, потому что были шансы, но снова всё проебали на пять лет, и снова, и снова. Конченые дегенераты, что стандартизаторы, что восхвалятели.

Это же веб технолоджис, это мировая ИТ элита.

Вот согласен. Размещение элементов что в wpf что в андроид студио, гораздо логичнее и проще реализовано