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

Тебе помочь или ты прост пофлудить хочеш?

Очевидно же, второе.

Классика просто, «Мартышка и очки».

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

sass и less уже много лет, по меркам фронтенда так вообще вечность. Бери да используй.

Ну ты и неосилятор. Даже CSS не смог осилить :D

Я дофига гуглил и читал SO, но как то внятного способа сделать так, что размер div определялся его окружением, а для внутреннего контента он выглядел как контейнер фиксированного размера, чтобы контент не мог расширить контейнер,я так и не понял

Бери да используй.

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

это еще одна проблема css. О многих вещах там очень сложно догадаться (и запомнить тоже), их делают методом тыка, так сяк, жопой об косяк, пока блоки не встанут как надо. Каждый раз порясь в туза заново.

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

Выкинул не относящееся к делу:

https://pastebin.com/raw/73Aexpai

Ну да, сначала собирают браузер без libastral, а потом хотят, чтобы этот браузер сам угадывал, где ему overflow делать, а где нет.

Скорее всего, там c position придется поиграться, используя absolute или fixed.

Хмм, играться с позицией, чтобы регулировать размер?

Ну, а если использовать vh + calc?

Например, для центрального блока задать calc(100vh - var(--header-height) - var(--footer-height))?

И для него же overflow-y: scroll.

Так можно попробовать)

Я не помню, получится ли иначе ограничить размер и показать полосу прокрутки у элемента. Возможно, кстати, и свойства overflow + max-height хватит.
Насчет размера - короче, в css есть две головных боли: высота и выравнивание элемента по вертикали, вокруг которых всегда приходится плясать с бубном. Самый простой и действенный вариант, как уже написали - использовать calc.

https://jsbin.com/geloxicino/edit?html,css,output

html, body {
  height: 100%;
  margin: 0;
}

.full-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bar {
  background-color: gray;
  height: 50px;
}

.content {
  flex-grow: 1;
  overflow: auto;
}

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

А какой нынче хорошо выглядящий кроссплатформенный движок, который не будут ломать раз в несколько лет?

Думаешь я от хорошей жизни в веб полез?

А какой нынче хорошо выглядящий кроссплатформенный движок, который не будут ломать раз в несколько лет?

Любой завтрашний, веб устаревает быстрее.

Думаешь я от хорошей жизни в веб полез?

Нет, за золотые горы, очевидно. Зачем иначе в IT-золотари ходить-то…

Видел эту тему. В спецтему не пошёл. :)

Жабоскриптъ есмь для оного.

function resize()
{
    var m = document.getElementById("menu");
    if( !m ) return;
    var c = document.getElementById("content");
    if( !c ) return;
    content_height = ( document.body.clientHeight - m.offsetHeight );
    c.style.height = content_height + "px";
}
window.addEventListener( 'resize', resize );
window.addEventListener( 'load',   resize );

Если есть ещё внизу какая-то срань, то аналогично достань её высоту и тоже вычти из content_height

по крайней мере это проще, чем разбираться в этой говнине под названием CSS. Но даже здесь бездны идиотизма. Почему банальная высота элемента - это, сцуко, offset, сцуко, Height? offset чего относительно чего? Нахера она readonly и почему, внезапно, в какую-то style.height эту банальную высоту надо записывать? Ну всё что только можно - через жопу. Даже в такой банальщине.

Вобще, конечно, веб это говнина состоящая из говнины HTML, в которой даже сраного тупейшего \hfill нету, из говнины JS, которая рождает идиотов, и из говнины CSS, в которой практически всё является запредельным маразмом. Если есть возможность - то лучше в это не вляпываться. Ну а так - это вот киберпанк, который мы заслужили, да.

https://pastebin.com/raw/73Aexpai

Починил: https://jsfiddle.net/wLj0nrbv/

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

У плохого мастера всегда инструмент виноват

Вот только «починенное» без этого вашего вуя и прочей левой дряни нихера не работает :)

У плохого мастера всегда инструмент виноват

Ну да. Поэтому он и забивает какие-то сраные гвозди аж целыми вуями VHS видеомагнитофонами. Получается глупо и херово, прямо как у тебя.

Словно там без эмодзей говна мало. Говна там много, а букв нету.

фуу, мат переемат в треде. куда смотрят модеры?

Что значит не работает? Почему?

https://jsfiddle.net/fnoubwc3/

глупо и херово

Лол, и это говорит человек, который предложил повесить обработчик на ресайз для задачи, которая элементарно решается на чистом цсс. Матчасть учи и не позорься.

Весь жабоскрипт убери и покажи как оно работает :)

элементарно решается на чистом цсс

Только что-то никто ещё не показал как. :)

Ты совсем поехавший или кто? На JS там инициализация codemirror. Если ты уберешь js, то просто не будет codemirror, который нужен тсу. На https://jsfiddle.net/7ream6n4/1/

Невежество - это плохо. Лечись.

Если ты уберешь js, то просто не будет codemirror, который нужен тсу.

Ага, пусть вместо codemirror будет просто div. И продемонстрируй как это будет работать с чистым CSS. :)

Я тебе уже продемонстрировал. Ссылка выше в посте. Разуй глаза.

Там всё ещё codemirror и если напихать в него текста, то оно не работает. :) Сам-то пробовал вообще? Или херак-херак и в продакшен?

Все с тобой ясно. Наслаждайся https://jsfiddle.net/ge7dun5q/

CSS, конечно, сложный, но современный CSS позволяет решать практически все нужные задачи.

Вы видимо только проснулись, я просто хз как объяснить то, что вы пишите

Блин, ты хочешь от текстовой верстки несвойственные ей фишки, конечно убого будет. А вообще выкини кривой флекс и используй height: calc(100%-(высота верхней панели + высота нижней панели))

Блин, ты хочешь от текстовой верстки несвойственные ей фишки, конечно убого будет.

Что тут несвойственного? Обычное дело для верстальщика. Можно и как вы написали (хотя вариант не лучший), можно и на флексах, можно и на гридах, можно ещё как-то...

Ты c div’ами покажи, что ты как маленький :)

Нет, с дивами такого сделать невозможно. Это сложная магия, смирись.

Вот, к слову, на гридах https://jsfiddle.net/fL158g9o/

хотя вариант не лучший

Хз как сейчас но когда я активно верстал это был единственный гарантированно везде работающий вариант, кроме таблиц естественно.

пусть вместо codemirror будет просто div.

пожалуйста: https://jsfiddle.net/gs2tvp1e/

И ещё вариант с textarea в догонку: https://jsfiddle.net/gs2tvp1e/1/

А вообще выкини кривой флекс

В чём кривизна флекса? Пока что я вижу кривизну только вот здесь:

height: calc(100%-(высота верхней панели + высота нижней панели))

– это же после каждого чиха придётся высоту править. Нужно быть больным, чтобы заменить флексбокс на это. Хуже только вариант c обрабочиком resize от стенсона.

бро

Работает только с конкретным прямым указанием высоты header и footer, что в 2020 тащемта позорище. Если высоту не указывать, то получается лажа. :) Ну и overflow: auto; надо чтобы скролл был. И да, нижний div у тебя нифига не 100px внезапно, примерно 20 пикселей куда-то внезапно просрались. :)

<div id="header">test<br />test<br />test</div>
<div id="content">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test</div>
<div id="footer">test<br />test<br />test</div>

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

В гущу твоего совершенного невежества, да.

https://i.snipboard.io/R4QytT.jpg

А в распоследнем фуррифоксе оно на элемент с «Console (beta)» налезает.

И вот так вот всё через жопу в этом вашем HTML/CSS/JS - постоянно.

Нет, это у тебя в голове все через жопу, потому что ты профан и бестолочь. Console на jsfiddle во всех браузерах элемент с абсолютным позиционированием, поверх вьюпорта. Так задумано разработчиками jsfiddle. Но ты этого, конечно, не поймешь.

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