☰

» »

[CSS zagonetka] Div dinamični resize

[CSS zagonetka] Div dinamični resize

HotBurek ::

Pozdravljeni.


Imam en simple primer, kako tole rešit.

V večjem div-u sta dva manjša div-a; prvi (na levi) se dinamično širi/krči, drugi (na desni) pa je fiksne širine.

Primer 1: Zunanji div ima širino 1000px, prvi notranji 800px, drugi notranji 200px.
Primer 2: Zunanji div ima širino 700px, prvi notranji 500px, drugi notranji 200px.

Kako to naredit v CSS, da se bo prvi notranji div dinamično raztegal na 100% od tistega, kar je še prostora (1000-200=x, 700-200=x)?

root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window
  • spremenilo: HotBurek ()

DeeJay ::

https://css-tricks.com/snippets/css/a-g...

HotBurek ::

Evo, rešil problem s sledečim CSSjem:

.inner-frame-table-1 {
	overflow: auto;
	box-sizing: border-box;

	display: table;
	border-collapse: separate;
	border-spacing: 5px;
}

.inner-frame-table-cell-1 {
	overflow: auto;
	box-sizing: border-box;

	width: 65%;
	display: table-cell;
}

.inner-frame-table-cell-2 {
	overflow: auto;
	box-sizing: border-box;

	width: 450px;
	display: table-cell;
}



Ta drugi div ob ožanju okna ni fix širine, ampak se bo dalo prežitev.

Celotni max width pa je 1200px.
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window

Matek ::

Ojej - oprosti, ampak našel si najbolj nepraktično in zastarelo rešitev. Najbolje bo, če upoštevaš prvi nasvet, ki ti ga je dal DeeJay, in se naučiš flexbox. Rabil boš dobesedno tri vrstice CSSja - parentu nastaviš display: flex, enemu childu fiksno širino in drugemu flex: 1.
Bolje ispasti glup nego iz aviona.

HotBurek ::

Zadevo sem poizkusil in je kul, samo je problem, ker Flex ne dela na iOS/Safari 7. Stare dobre tabele pa delajo, zato sem prešaltal.
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window

DeeJay ::

https://stackoverflow.com/questions/335...

smacker ::

Na Safari 6.1-8 rabiš samo webkit prefix. Na splošno je flex dobro podrt, muči ga le IE9 (released 2011): https://caniuse.com/#search=flex

HotBurek ::

Sem tudi s tem poizkušal, pa mi ni uspelo.


Enivej, lets move on.

Naslednji primer. Znotraj div elementa bi želel, da se slike naključnih dimenzij prikazujejo na max velikost div-a, s tem da se pri raztegovanju (ali krčenju) ohrani razmerje širina/višina slike.

<div class="inner-image-frame-1">
	<img class="img-main-image-1" src="/troll-master.cum" alt="">
</div>


.inner-image-frame-1 {
	overflow: auto;
	box-sizing: border-box;

	width: 400px;
	height: 400px;
}


.img-main-image-1 {
	overflow: auto;
	box-sizing: border-box;

	width: 100%;
	height: 100%;
	/*height: auto; Safari, IE*/
	
	object-fit: contain;
}


Zadeva dela v FF. V Safari in IE dela, če je za img height nastavljen auto.

S tem, da v primeru, da je slika višja, kot širšra, pride do overflow-a.

Kako to pofiksat?
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window

Zgodovina sprememb…

  • spremenilo: HotBurek ()

Arey ::

Jz bi to pofiksal tko da bi uproabil flex box in nehal zapravljat čas z operacijskim sistemom iz leta 2013 in z 0.1% market share-a ( https://david-smith.org/iosversionstats/ ). Razen če je to requirement produkta, v tem primeru pa bi šel delat drug produkt.

Zgodovina sprememb…

  • spremenil: Arey ()

s1ck :: 

<div class="outer">
          <div class="inner-1">1</div>
          <div class="inner-2">2</div>
</div>


.outer {
          width: 1000px;
          display: flex;
          flex-direction: row;
}

.inner-1 {
          width: calc(100% - 200px);
}

.inner-2 {
          width: 200px;
}

s1ck ::

Glede slike nevem ce dojemam pravilno vprasanja, zelis da je slika siroka toliko kot dinamicni div, velika pa kolkor pac pride?

img {
            width: 100%;
            height: auto;
            display: block;
}


P.S. doma nimam vseh brskalnikov, dela sigurno na chrome pa safari

Zgodovina sprememb…

  • spremenilo: s1ck ()

dope1337 ::

Tudi sam sem sem pred kratim (po cca 7+ letih) spravit spisat eno simple responsive spletno stran s html/css.

In sem na koncu ugotovil da brez flexboxa + mediaquery je pri vseh teh napravah dandanes vse prevec mukotrpno ...

Edit: TUKAJ je vse lepo razlozeno skozi primere.
"Everybody is a genius. But if you judge a fish by its ability to climb a tree
it will live its whole life believing that it is stupid."
-Albert Einstein

Zgodovina sprememb…

  • spremenilo: dope1337 ()

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1298347767 (6904) sunniegoldie
»

Kako narediti to stran "resposive"?

Oddelek: Izdelava spletišč		51038 (929) zzbil
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61867 (1747) jonystar
»

CSS - DIV - Brez Tabele

Oddelek: Izdelava spletišč		231599 (1302) jernejp
»

Javascript in php

Oddelek: Izdelava spletišč		201962 (1651) rokpok

Več podobnih tem