Avatar
Silvinios
Redaktor
Avatar
Silvinios:

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. srpna 12:36
 
Odpovědět 27. srpna 12:36
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na Silvinios
Ján Timoranský:

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

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

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. srpna 13:03
Find what you love and let it kill you.
Avatar
Silvinios
Redaktor
Avatar
Odpovídá na Ján Timoranský
Silvinios:

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. srpna 13:39
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na Silvinios
Ján Timoranský:

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. srpna 14:02
Find what you love and let it kill you.
Avatar
Nahoru Odpovědět 27. srpna 14:05
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Silvinios
Redaktor
Avatar
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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. srpna 16:17
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Oxtimus
Jiří Gracík:

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

Nahoru Odpovědět 27. srpna 16:19
Creating websites is awesome till you see the result in another browser ...
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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

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

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. srpna 16:22
Find what you love and let it kill you.
Avatar
Silvinios
Redaktor
Avatar
Odpovídá na Ján Timoranský
Silvinios:

Díky moc! Funguje to skvěle.

 
Nahoru Odpovědět 27. srpna 22:27
Avatar
Silvinios
Redaktor
Avatar
Silvinios:

Ř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. srpna 22:29
Avatar
Silvinios
Redaktor
Avatar
Odpovídá na Oxtimus
Silvinios:

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

 
Nahoru Odpovědět 27. srpna 22:31
Avatar
David Hynek
Redaktor
Avatar
David Hynek:

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. srpna 1:20
Nahoru Odpovědět 28. srpna 1:19
Čím víc vím, tím víc věcí nevím.
Avatar
David Hynek
Redaktor
Avatar
David Hynek:

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