LINUX.ORG.RU

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

 , ,


0

1

Итак, есть банальнейшая задача:

Сверху страницы полоса известной высоты, снизу полоса известной высоты, между ними текстовый редактор, заполняющий всю доступную высоту.

В качестве редактора взял codemirror, но не суть. Для заполнения всей высоты использовал flex div-контейнер и flex-grow: 1, и height:100% для .CodeMirror,

Чтобы все было высотой с страницу браузера, указал для html, body height:100%, max-height:100%.

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

Капец.

★★★★★

цсс - ебаный стыд, да. С ним работать - себя не уважать.

Але, блять, переменные появились когда? В 2019 году вроде, да? Это, блять, в файлах, которые состоят, сука, обычно из минимум 2k строк. А обычно из 4-5.

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

А комментарии, сука. Не позволять строчные комментарии, это ж блядь вообще уголовное преступление. У блочных комментов 2 ебланских недостатка. Их неудобно писать и они не поддерживают вложнность.

Чем скорее это говно сдохнет в страшных муках, тем лучше для Вселенной.

anonymous ()
Ответ на: комментарий от anonymous

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

Более ничтоженые создания - только пидорасы из консорциума Юникода, засравшие его своими эмодзями.

anonymous ()
Ответ на: комментарий от anonymous

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

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

abs ★★★ ()
Ответ на: комментарий от Tigger

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

cvs-255 ★★★★★ ()
Последнее исправление: cvs-255 (всего исправлений: 2)
Ответ на: комментарий от abs

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

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

anonymous ()
Ответ на: комментарий от cvs-255

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

anonymous ()
Ответ на: комментарий от anonymous

цсс - ебаный стыд. Але, блять, переменные когда? Это, блять, в файлах, сука. Знаю всю эту мудоебнь на хайпе. А комментарии, сука. Это ж блядь вообще.

Да внатуре братан. Пиздец нахуй блядь.

anonymous ()
Ответ на: комментарий от cvs-255

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

cherry_boy ()
Ответ на: комментарий от t184256

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

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

cvs-255 ★★★★★ ()
Последнее исправление: cvs-255 (всего исправлений: 1)
Ответ на: комментарий от cvs-255

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

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

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

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

t184256 ★★★★★ ()

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

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, в которой практически всё является запредельным маразмом. Если есть возможность - то лучше в это не вляпываться. Ну а так - это вот киберпанк, который мы заслужили, да.

Stanson ★★★★★ ()
Последнее исправление: Stanson (всего исправлений: 6)
Ответ на: комментарий от dsxl

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

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

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

Stanson ★★★★★ ()
Последнее исправление: Stanson (всего исправлений: 4)
Ответ на: комментарий от Stanson

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

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

dsxl ()
Ответ на: комментарий от Stanson

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

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

mimico ()
Последнее исправление: mimico (всего исправлений: 1)
Ответ на: комментарий от mimico

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

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

Stanson ★★★★★ ()
Последнее исправление: Stanson (всего исправлений: 1)

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

ya-betmen ★★★★★ ()
Последнее исправление: ya-betmen (всего исправлений: 1)
Ответ на: комментарий от ya-betmen

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

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

CryNet ★★★★ ()
Ответ на: комментарий от CryNet

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

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

ya-betmen ★★★★★ ()
Последнее исправление: ya-betmen (всего исправлений: 1)
Ответ на: комментарий от ya-betmen

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

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

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

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

dsxl ()
Ответ на: комментарий от dsxl

Работает только с конкретным прямым указанием высоты 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>
Stanson ★★★★★ ()
Последнее исправление: Stanson (всего исправлений: 4)