[ Príspevkov: 6 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
Ako roztiahnuť div na celú obrazovku

Registrovaný: 01.05.14
Prihlásený: 16.09.19
Príspevky: 152
Témy: 52 | 52
Bydlisko: Dubovce
NapísalOffline : 30.05.2017 12:41 | Ako roztiahnuť div na celú obrazovku

Dobrý deň, Chcel by som sa opýtať ako mám roztiahnuť celý div/header na celú veľkosť okna.
Napr. Já mam 1366x768 a mám to roztiahnuté tak ako chcem pretože som to optimalizoval podla môjho monitoru (https://ctrlv.cz/uTB6) ale kamarát ktorý má 1920x1080 tak to má useknuté. (https://ctrlv.cz/zl2S)

Používam bootstrap 3

Časť kódu:
Kód:
<header>
      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
            <li><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
              <li><a href="/anime/">Anime</a></li>
              <li><a href="/manga">Manga</a></li>
            </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Administrácia</a></li>
          </ul>
          </div>
        </div>
      </nav>
   </header>


CSS
Kód:
header {
   background-image: url("/img/header.jpg");
   background-color: #281e14;
   background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  display: block;
   position: relative;
   height: 50em;
}


Offline

Správca fóra
Správca fóra
Ako roztiahnuť div na celú obrazovku

Registrovaný: 08.08.09
Príspevky: 12452
Témy: 41 | 41
Bydlisko: Brno (CZ) /...
NapísalOffline : 30.05.2017 13:08 | Ako roztiahnuť div na celú obrazovku

Nie som si úplne istý čo chceš dosiahnuť, ale predovšetkým sa vyhni nejakému pevnému určovaniu výšky (height: 50em) ak chceš aby mal element dynamickú výšku podľa okna prehliadača.
Inak asi takto:
  • html - height: 100%
  • body - height: inherit
  • header - height: inherit

Všetky tri CSS vlastnosti MUSIA byť nastavené.


_________________
always is always wrong
Offline

Užívateľ
Užívateľ
Ako roztiahnuť div na celú obrazovku

Registrovaný: 01.05.14
Prihlásený: 16.09.19
Príspevky: 152
Témy: 52 | 52
Bydlisko: Dubovce
Napísal autor témyOffline : 30.05.2017 13:16 | Ako roztiahnuť div na celú obrazovku

Skúsil som height: inherit; ale nefunguje mi to. obrázok ktorý tam bol zmizol a je to celé čierne.
A chcem dosiahnuť to že header bude roztiahnutý na celú obrazovku ako úvod s menu potom môže scrolovať nižsie.


Offline

Správca fóra
Správca fóra
Ako roztiahnuť div na celú obrazovku

Registrovaný: 08.08.09
Príspevky: 12452
Témy: 41 | 41
Bydlisko: Brno (CZ) /...
NapísalOffline : 30.05.2017 13:18 | Ako roztiahnuť div na celú obrazovku

Nefunguje ti to, lebo si nenastavil všetko.
Ešte raz, musíš nastaviť všetky tri body o ktorých som písal. Vidíš ich? Skúsim ich dať väčším, možno...na druhý pokus...to výjde.


_________________
always is always wrong
Offline

Užívateľ
Užívateľ
Ako roztiahnuť div na celú obrazovku

Registrovaný: 01.05.14
Prihlásený: 16.09.19
Príspevky: 152
Témy: 52 | 52
Bydlisko: Dubovce
Napísal autor témyOffline : 30.05.2017 13:21 | Ako roztiahnuť div na celú obrazovku

všetky tri body som použil na prvý krát a stále to bolo čierne.
Skúsim to vložiť do vlastného css a nie do bootstrapu

// Spojený príspevok Uto 30.05.17 13:28

ďakujem už to funguje. Neviem prečo mi to neišlo keď to bolo v bootstrape. Skúsim napísať kamarátovi nech to skusí


Offline

Správca fóra
Správca fóra
Ako roztiahnuť div na celú obrazovku

Registrovaný: 08.08.09
Príspevky: 12452
Témy: 41 | 41
Bydlisko: Brno (CZ) /...
NapísalOffline : 30.05.2017 13:29 | Ako roztiahnuť div na celú obrazovku

Lebo si to nastavil naopak, <html> je najvyšší "uzol" tvojej stránky, tomu si dal "height: inherit", ale ten nemá rodiča, nadradený element od ktorého by mohol dediť nejaké vlastnosti, preto ho nebolo vidieť a <body>, ktorý je až pod ním (v ňom) si nastavil height: 100%, lenže keď nie je vidieť rodič (html), nemôžeš vidieť podradené elementy (body, ani nič pod ním, v ňom, nikde).
Možno by to chcelo najprv osviežiť/naučiť sa základy HTML/CSS a potom sa púšťať do väčších vecí a bootstrapu ;)


_________________
always is always wrong
 [ Príspevkov: 6 ] 


Ako roztiahnuť div na celú obrazovku



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

ako roztiahnut na celu obrazovku pri HDMI prepojeni ?

v Monitory, televízory a projektory

11

7722

19.03.2010 13:30

VanJ

V tomto fóre nie sú ďalšie neprečítané témy.

film HD nejde roztiahnut na celu obrazovku

v Video programy

0

309

20.04.2014 19:36

conrad1

V tomto fóre nie sú ďalšie neprečítané témy.

nejde na celú obrazovku

v Monitory, televízory a projektory

0

695

11.01.2011 20:15

turian

V tomto fóre nie sú ďalšie neprečítané témy.

Hra na celu obrazovku

v nVidia grafické karty

16

3296

02.01.2011 0:53

walther

V tomto fóre nie sú ďalšie neprečítané témy.

Film na celu obrazovku

v Video programy

6

1292

16.12.2012 19:53

Doudo

V tomto fóre nie sú ďalšie neprečítané témy.

Fifa 2018 na celu obrazovku

v Počítačové hry

2

128

13.09.2018 5:33

Wikimonik

V tomto fóre nie sú ďalšie neprečítané témy.

nezobrazuje hru na celu obrazovku

v Počítačové hry

10

5234

10.09.2011 15:35

Spartan.Ex

V tomto fóre nie sú ďalšie neprečítané témy.

Hry mi nejdu na celu obrazovku

v Počítačové hry

13

1993

31.12.2013 2:22

14basta144

V tomto fóre nie sú ďalšie neprečítané témy.

Youtube apd-video na celu obrazovku

v Ostatné

3

762

25.12.2008 12:22

Skyro

V tomto fóre nie sú ďalšie neprečítané témy.

JavaScript - Iframe sa nezobrazí cez celú obrazovku

v JavaScript, VBScript, Ajax

5

307

15.06.2016 19:17

weroro

Táto téma je zamknutá, nemôžete posielať nové príspevky alebo odpovedať na staršie.

Nejde mi cs 1.6 na celú obrazovku

v Počítačové hry

0

170

08.01.2015 12:04

Ema

V tomto fóre nie sú ďalšie neprečítané témy.

menu na celu sirku elementu div (nie table layout)

v HTML, XHTML, XML, CSS

23

932

17.05.2010 18:50

Merlin_sk

V tomto fóre nie sú ďalšie neprečítané témy.

online videa "cez celu obrazovku"

v Video programy

0

497

14.04.2008 19:59

juraj26

V tomto fóre nie sú ďalšie neprečítané témy.

"Padanie" režimu na celú obrazovku

v Ovládače

1

201

25.01.2014 12:42

Mandy

V tomto fóre nie sú ďalšie neprečítané témy.

Ako prinútiť jeden div, aby sa ovládal cez druhý div

v JavaScript, VBScript, Ajax

14

357

22.04.2014 9:45

Mego

V tomto fóre nie sú ďalšie neprečítané témy.

Bonjour - Ako odstranit celu zlozku

v Antivíry a antispywary

2

392

04.12.2007 17:11

Axwell



© 2005 - 2019 PCforum, edited by JanoF