Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
AdamPavlin
Člen
Avatar
AdamPavlin:1.12.2021 23:58

html, body {width:100%; height:100%}

Jaký je tu rozdíl mezi body a html?

Zkusil jsem: Zkoušel jsem se ptát na stack overflow, ale stránka mi to neumožnila, že mám špatně zadanou otázku.

Chci docílit: Nastavit aby bylo body na celý obrazovce... a na zaklade toho dál nastavovat stránku.

 
Odpovědět
1.12.2021 23:58
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.12.2021 7:46

Zkus pouzivat bootrstrap. To je css knihovna, ktera css ma hotove, ty ho jen musis zapsat do html pomoci class.

K tve otazce...
https://getbootstrap.com/…ntroduction/#…

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Toto je takova bezna struktura stranky. Vidis tam tag HTML, tag BODY. Co nevidis, ze nat html je jeste objekt WINDOW (ktery je pristupny treba pres javascript).
100% znamena, ze se pouzije 100% (sirky/vysky) nadrazeneho objektu.
Pokud ma window 300 px, tak 100% bude 300px.
Pozn.: 100% height u html, body ne vzdy funguje (podle prohlizece)
Pozn.: 100% width se muze chovat nezvykle (podle prohlizece), pokud menis rozmery okna, full screen, window mode, ruzne stahujes sirku okna.
Pozn.: html, body miva nastavene obcas margin.
Pozn.: obsah muze sirku pretect, pak zacnou fungovat trochu jina pravidla se scroll-bary a ty si muzou sirku ukousavat.

Otazkou ted je, jaky konkretni problem nastal u tebe? Nebo se jen tak obecne ptas, zda existuje tag html, body, kde a jak se pise a proc?

Pozn.: V html kodu jde o strukturu. Musi byt obdelnicky v obdelnickach. A celou stranku uzavira tag html.
Pozn.: Html ani body mit v kodu nemusis. Prohlizec si je tam sam doplni, kde chce.Coz nekdy nemusi byt tam, kde bys je rad. A tez se mozna nebudou dat stylovat pres css tagy, ktere oficialne v kodu nemas.

 
Nahoru Odpovědět
2.12.2021 7:46
Avatar
AdamPavlin
Člen
Avatar
AdamPavlin:2.12.2021 13:58

Jen sem se jen tak ptal. Fungovalo mi to i s tím html, body {height:100%} ale děkuji za další info.

 
Nahoru Odpovědět
2.12.2021 13:58
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.12.2021 15:17

Ok. Tak si jen dej bacha na marginy a padingy. Vim, ze je tam nejaka zaludnost a nastavuji se oba na 0, pro jistotu.

 
Nahoru Odpovědět
2.12.2021 15:17
Avatar
Jurajs
Člen
Avatar
Odpovídá na AdamPavlin
Jurajs:2.12.2021 20:12

Ano na margin a padding dávej bacha...Já když píšu HTML a CSS, tak si na začátku CSS napíši tento kus kódu

*{
   margin: 0;
  padding: 0;
}

Hvězdička značí, že se ti margin a padding vynulují u všech elementů, tohle je fakt dobrá věc ;)

 
Nahoru Odpovědět
2.12.2021 20:12
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.