NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Silvinios
Tvůrce
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ý
Tvůrce
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ý
Tvůrce
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
Tvůrce
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ý
Tvůrce
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
Libor Šimo (libcosenior)
Tvůrce
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
Tvůrce
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
Člen
Avatar
Michal: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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Michal
Neaktivní uživatel: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
Neaktivní uživatelský účet
Avatar
Michal
Člen
Avatar
Michal: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ý
Tvůrce
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í
+2,50 Kč
Řešení problému
Nahoru Odpovědět
27.8.2016 16:22
Find what you love and let it kill you.
Avatar
Silvinios
Tvůrce
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
Tvůrce
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
Tvůrce
Avatar
Odpovídá na Michal
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
Tvůrce
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
Tvůrce
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.