Diskuze: Nastavení 100% výšky
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Tvůrce

Zobrazeno 16 zpráv z 16.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Nestačí position: fixed
a height: 100vh
?
Nechci aby to bylo fixed jelikož později bude více položek v menu a nechci aby to bylo na scrollování
Ja bych pouzil bootstrap. Vyuzil jeho 100% a dovnitr dal ten TinyMce tez na
100%.
Nevim, zda to uz css umi, ale kdysi se na height pouzival JS.
Muzes pouzit overflow, kdyz nesches scrolovani.
A min-height
?
Teda jestli jsem pochopil správně, že chceš sidebar scrollovat se stránkou.
Ještě pak můžeš zkusit max(100%, 100vh)
.
Ano chci scrollovat, ale jelikož je obsah dynamický tak když je obsah větší jako 100% tak sidebar nejde úplně dolu, proto jsem právě zkoušel přes ten javascript aby se vždy dorovnalo výška sidebaru podle výšky stránky ale funguje to jen na začátku ale když potom použiju tu textareu na resize tak se to zase rozpadne
Ja bych udelal jiny trik. Odebral bych class vlevo, ktera definuje styly
sloupce a vsem ostatnim bych nastavil display:none class. Cili, nejdriv docilit
pozadovaneho bez layoutu a pak layout nejak odstranit.
V tuto chvili mas layout a snazis se ho nejak prebijet.
Urcite by prvek, kteremu nastavujes 100% height nemel mit v sobe padding a kolem
margin. Mozna bych mu vnutil pro jistotu 1px ramecek barvou pozadi, aby marginy
nevytekaly.
Se 100% height si ted prave nejsem jisty, jak to resi nove prohlizece, css3. Ale
u tech starych bylo treba nastavit html, body, #idecko {margin:0; padding:0;
height:100%}, protoze tam height omezovalo height body a to zas omezoval html
tag. Slo o to docilit cross-browser.
https://www.jakpsatweb.cz/…ednotky.html
https://www.jakpsatweb.cz/…y/index.html#… = nejake
prikladz na vzstredeni, tam musi se 100% height pracovat
https://www.jakpsatweb.cz/css/height.html
Pokud potřebujete nějaký prvek mít stejně vysoký, jako je šířka okna
(například čtvercový obrázek), použijte jednotku vw.
Jo, podle mne je uzitecne mit u editoru tlacitko na rychle prepnuti Code. casto editor nema filtraci kodu a je mozne kod pridat nebo nekdy je nutne odebirat word formatovani. To vetsinou resim externe pres Far nebo Pspad.
Já právě používám height: 100vh; ale já potřebuji aby výška sidebaru byla vždy stejně velká jako celá stránka, i v tu chvíli když budu resizovat ten editor a bude se mi stránka prodlužovat, tak aby se v tu chvíli prodloužil i ten sidebar, proto jsem hledal řešení přes javascript ale fungovalo to tak že jen po načtení stránky se height nastavil na výšku celé stránky ale po resize sidebar už zůstal stát. Proto když normálně přijdu na stránku tak sidebar je v pohodě, tak jak to potřebuji ale po resize se to už neprodlouží.
A nebo aby dokud byl v sidebaru obsah tak se to scrollovalo a potom by to bylo fixed
Mohl bys sem dát odkaz na ten web, ať to mám kde vyzkoušet, než sem začnu psát haldu možných řešení?
Chces mit 2 sloupce stejne vysoke, ne? display:table-row, table-cell
Ten bootstrap to taky umi.
google = 2 sloupce stejne vysoke
Js by mohl fungovat nejak takto. Kazit to muzou marginy a padingy, tak na ty bacha.
function prepocitej_vysky()
{
var $, a, b, ha, hb;
$ = document.querySelector.bind(document);
a = $('#a');
b = $('#b');
ha = a.offsetHeight;
hb = b.offsetHeight;
if (hb>ha) {a.offsetHeight = hb + 'px'; return;}
if (ha>hb) {b.offsetHeight = ha + 'px'; return;}
}
// onclick = "nastav_vysku(); prepocitej_vysky();"
Podle mne to funguje naprosto bezvadne. Asi mas problem ve tvem nezverejnem
kodu
https://jsfiddle.net/e0gp9d38/
<style>
#a, #b, #c {display:table-cell; width: 300px; border:2px solid #f80; }
#c {display:table-row;}
#b {left: 350px; top:-1px;}
</style>
<div id="d">
<div id="a"></div>
<div id="b">
<span onclick="nastav_vysku(-20);">-20</span> |
<span onclick="nastav_vysku(+20);">+20</span>
</div>
</div>
<script>
function prepocitej_vysky()
{
var a, b, ha, hb;
a = $('#a');
b = $('#b');
ha = a.offsetHeight;
hb = b.offsetHeight;
a.innerHTML = [ha, hb].join(',');
if (hb>ha) {a.style.height = hb + 'px'; return;}
if (ha>hb) {b.style.height = ha + 'px'; return;}
}
function nastav_vysku(diff)
{
var b, hb;
b = $('#b');
hb = b.offsetHeight;
hb += diff;
b.style.height = hb + 'px';
prepocitej_vysky();
}
var $ = document.querySelector.bind(document);
prepocitej_vysky();
</script>
Nevím, jak bych to do toho kódu aplikoval, mám šablonu kterou jsem nedělal já, odkaz na web zde: http://velkysenov.8u.cz/, vím že je takhle blbé někomu pomáhat.
Problém už jsem vyřešil, bylo to tím že tinymce si načte až po všem tu textareu tudíž se nastavoval špatná výška sidebaru.
Zobrazeno 16 zpráv z 16.