LINUX.ORG.RU

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

 , ,


0

1

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

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

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

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

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

Капец.

★★★★★

Ответ на: удаленный комментарий

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

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

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

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

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

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

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

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

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

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)
Ответ на: комментарий от mimico

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

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

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

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

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

mimico ()