21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
Marcus Flintus
Profil
Zdravím,

mám div s pozadím (#bg) v absolutní pozici, který potřebuju roztáhnout na pozadí webu následujícím způsobem:
šířka minimálně 100% ale max. 2000px
výška 1500px, ale pokud je obsah stránky kratší, tak podle obsahu stránky, ale max. 100%.

<body>
  <div id="bg"></div>
  <main>
  obsah stránky
  </main>
 </body>
 

Jsem schopen toho dosáhnout přes css? Přes jQuery bych si s tím poradit uměl, ale raději bych se tomu vyhnul. Ta absolutní pozice #bg a to že <main> je mimo #bg je kvůli javascriptovým efektům s pozadím, proto to je takové nešikovné.

Děkuji za rady :-)
MF
Corwin
Profil
ahoj, jít by to mělo.

html + body musí mít oba width:100%; a height: 100%;

pak když #bg bude přímo potomkem body a ty mu dáš width:100%; height:100%; position: absolute; (top, left 0), bude ti div dycky vyplňovat celé okno prohlížeče.

s tou maximální šířkou to bude složitější. lze napsat max-width:2000px;, ovšem pak je otázka, jestli nebude vadit, když to na super velkých monitorech nebude vycentrované. pokud bys to chtěl centrovat, musíš dát 2 divy do sebe, kde teprv ten vnitřní bude mít max-width a margin: auto; (a výšku samozřejmě 1000%, pozice žádná nebo relativní)

s tou výškou moc nerozumím, jak to myslíš. nechtěl jsi říct naopak? 100% ale nikdy ne víc než 1500 px? pak to samozřejmě řeší max-height.
Marcus Flintus
Profil
Ahoj,

díky, rozumím.

S tou výškou to zkusím interpretovat jinak: chci aby výška byla 1500px, ale pokud je obsah stránky menší než 100%, tak aby se zmenšila i výška #bg - aby mi jenom kvůli němu nezůstával vertikální posuvník. Je to takhle srozumitelné? :-)
Corwin
Profil
Marcus Flintus:

pak bych dal height:100%; max-height:1500px; a měl by to být v cajku.
Tomáš123
Profil
Corwin:
pak bych dal height:100%; max-height:1500px; a měl by to být v cajku.
Nemalo. Keď tak min-height: 100%; max-height: 1500px;. Výška ako taká je nastavená stabilne a nemieni skákať do minimálnej alebo maximálnej hodnoty.
Corwin
Profil
Tomáš123
možná jsme to pochopili každý jinak... tvůj uvedený příklad může také být také ten správný, jenže z takhle strohého vysvětlení se špatně představuje, co a jak má výsledná stránka dělat. chtělo by to reálnou ukázku. i když s tou min-height si teď fakt nejsem jistý... musel bych si to napsat a vyzkoušet, což se mi úplně nechce (i když je to 5 minut...) :-)

// edit: musí to být height + max height. max height přebije normální height. jenže min-height přebije obojí.
http://sklad.treba.cz/test.html
http://sklad.treba.cz/test2.html

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0