Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Rozvržení stránky bez JavaScriptu

HTML a CSS HTML a CSS Rozvržení stránky bez JavaScriptu American English version English version

Aktivity (1)
Avatar
Silvinios
Redaktor
Avatar
Silvinios:27.8.2016 12:36

Ahoj,
mám následující HTML stránku a zajímalo by mě, jestli se dá dosáhnout stejného rozvržení bez použití JavaScriptu.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
        margin: 0;
}

.container {
        width: 1024px;
        margin: 0 auto;
        min-height: 100%;
}

.header {
        background-color: LightGray;
}

.content {
        background-color: LightYellow;
}

.footer {
        background-color: LightGray;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    function resize() {
        var minHeight = window.innerHeight - $(".header").height() - $(".footer").height();
        $(".content").css("min-height", minHeight);
    }
    $(document).ready(resize);
    $(window).resize(resize);
</script>
</head>
<body>
  <div class="container">
    <div class="header">Hlavicka</div>
    <div class="content">Obsah</div>
    <div class="footer">Paticka</div>
  </div>
</body>
</html>

Jde o to, aby stránka zabrala na výšku celou obrazovku, i když je výška obsahu menší.
Předem díky.

Editováno 27.8.2016 12:36
 
Odpovědět 27.8.2016 12:36
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na Silvinios
Ján Timoranský:27.8.2016 12:51

EDIT: aha, až teraz som si všimol tvoj problém.

Editováno 27.8.2016 12:52
Nahoru Odpovědět 27.8.2016 12:51
Find what you love and let it kill you.
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na Silvinios
Ján Timoranský:27.8.2016 13:03

Jedno z riešení: https://jsfiddle.net/msekhrtk/

Použil som flexbox, ktorý je super no nemá podporu na starších prehliadačoch, tak pozor na to.

Nahoru Odpovědět 27.8.2016 13:03
Find what you love and let it kill you.
Avatar
Silvinios
Redaktor
Avatar
Odpovídá na Ján Timoranský
Silvinios:27.8.2016 13:39

Díky za nasměrování na flexbox.

Ještě to ale není úplně ono. Potřeboval bych zachovat bílé pruhy vpravo a vlevo a dále bych potřeboval aby byl prostřední element .content roztažený na celou zbývající výšku. Element bude mít na pozadí obrázek.

 
Nahoru Odpovědět 27.8.2016 13:39
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na Silvinios
Ján Timoranský:27.8.2016 14:02

Aktualizoval som jsfiddle: https://jsfiddle.net/msekhrtk/ .
Ak ťa dobre chápem, tak teraz by to malo byť ako potrebuješ. V podstate stačilo pridať esťe jeden wrapper pre hlavičku a obsah. Bez neho by bol obsah vertikálne vycentrovaný.

Nahoru Odpovědět 27.8.2016 14:02
Find what you love and let it kill you.
Avatar
Odpovídá na Silvinios
Libor Šimo (libcosenior):27.8.2016 14:05

Mozes vysvetlit, preco bez JS?

Nahoru Odpovědět 27.8.2016 14:05
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Silvinios
Redaktor
Avatar
Odpovídá na Ján Timoranský
Silvinios:27.8.2016 16:15

Na https://jsfiddle.net/msekhrtk/ je stále tvoje původní verze.

 
Nahoru Odpovědět 27.8.2016 16:15
Avatar
Michal Struna:27.8.2016 16:17

Pokusil jsem se ještě o řešení bez flexboxu.

HTML:

<div class="container">
    <div class="header">Hlavicka</div>
    <div class="text">Obsah</div>
    <div class="footer">Paticka</div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
}

.container {
    height: auto;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    width: 1024px;
}

.header {
    background-color: lightgray;
}

.text {
    background-color: lightyellow;
    padding-bottom: 20px; /* Výška zápatí */
    min-height: calc(100vh - 40px); /* Výška 100% - (2 * výška zápatí) */
}

.footer {
    background-color: lightgray;
    bottom: 0;
    height: 20px;
    position: absolute;
    width: 100%;
}
 
Nahoru Odpovědět 27.8.2016 16:17
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Struna
Jiří Gracík:27.8.2016 16:19

Calc byl nedávno ještě hodně experimentální věc, jsi si jistý, že dneska už to funguje?

Nahoru Odpovědět 27.8.2016 16:19
Creating websites is awesome till you see the result in another browser ...
Avatar
Michal Struna:27.8.2016 16:22

Krom Opery Mini calc podporují nejnovější verze všech rozšířených prohlížečů, alespoň dle caniuse.

 
Nahoru Odpovědět 27.8.2016 16:22
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na Silvinios
Ján Timoranský:27.8.2016 16:22

Zlý link, sorry. Aktualizovaná verzia tu: https://jsfiddle.net/msekhrtk/2/

Calc je na tom pododbne ako flexbox, dokonca v niektorých prehliadačoch calc nie je podporovaný vôbec. Taká Opera mini tomu nerozumie, zato flexbox je na tom trochu lepšie a dá sa s ním naozaj vyhrať.

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 27.8.2016 16:22
Find what you love and let it kill you.
Avatar
Silvinios
Redaktor
Avatar
Odpovídá na Ján Timoranský
Silvinios:27.8.2016 22:27

Díky moc! Funguje to skvěle.

 
Nahoru Odpovědět 27.8.2016 22:27
Avatar
Silvinios
Redaktor
Avatar
Silvinios:27.8.2016 22:29

Řešení pro případ, že by odkaz v budoucnu nefungoval:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
        margin: 0;
}

.container {
        width: 1024px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: space-between;
        background-color: LightYellow;
        background-image:
                url("http://www.itnetwork.cz/images/5/marketing/man-notes-macbook-computer_resized.jpg");
        background-size: cover;
}

.header {
        background-color: LightGray;
}

.footer {
        background-color: LightGray;
}
</style>
</head>
<body>
  <div class="container">
    <div>
      <div class="header">Hlavicka</div>
      <div class="content">Obsah</div>
    </div>
    <div class="footer">Paticka</div>
  </div>
</body>
</html>
 
Nahoru Odpovědět 27.8.2016 22:29
Avatar
Silvinios
Redaktor
Avatar
Odpovídá na Michal Struna
Silvinios:27.8.2016 22:31

Patička nemá fixní velikost. Potřebuji, aby se hlavička i patička roztáhly podle obsahu.

 
Nahoru Odpovědět 27.8.2016 22:31
Avatar
David Hynek
Redaktor
Avatar
David Hynek:28.8.2016 1:19

Asi nejhubenější řešení co mě napadá :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  <style>
  html {height: 100%; box-sizing: border-box;}
  * {padding: 0px; margin: 0px;}
  *, *:before, *:after { box-sizing: inherit;}
  body {min-height: 100%; width: 100%;  position: relative;}
  .header {width: 100%;}
  .content {width: 100%; }
  .footer {width: 100%; position: absolute; bottom: 0;}
  </style>
<body>
  <body>
      <div class="header">Hlavicka</div>
      <div class="content">Obsah</div>
      <div class="footer">Paticka</div>
  </body>
</html>
Editováno 28.8.2016 1:20
Nahoru Odpovědět 28.8.2016 1:19
Čím víc vím, tím víc věcí nevím.
Avatar
David Hynek
Redaktor
Avatar
David Hynek:28.8.2016 1:59

Ještě jedna modifikace téhož, ale trochu jinak... patička nějakou velikost mít musí, protože se tam (ostatně i v předchozím používá position: absolute a zbytečně by se to pralo s obsahem, kdyby obsah narazil na patičku)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  <style>
html { position: relative;  min-height: 100%;  }
body { margin: 0 0 6em;}
.footer { position: absolute; bottom: 0;}
</style>
<body>
  <body>
      <div class="header">Hlavicka</div>
      <div class="content">Obsah</div>
      <div class="footer">Paticka</div>
  </body>
</html>
Nahoru Odpovědět 28.8.2016 1:59
Čím víc vím, tím víc věcí nevím.
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 16 zpráv z 16.