Ako roztiahnuť div na celú obrazovku

GamerSK · Napísal **GamerSK**: 30.05.2017 12:41

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;
}

killer · Napísal **killer**: 30.05.2017 13:08

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é.

GamerSK · Napísal autor témy **GamerSK**: 30.05.2017 13:16

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.

killer · Napísal **killer**: 30.05.2017 13:18

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.

GamerSK · Napísal autor témy **GamerSK**: 30.05.2017 13:21

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í

killer · Napísal **killer**: 30.05.2017 13:29

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

Ako roztiahnuť div na celú obrazovku

Podobné témy