[CSS] Výška elementu přes celou stránku

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod PiranhaGreg 6. 1. 2013 12:54

Jednoduchý dotaz. Potřebuji, aby se mi nějaký absolutně pozicovaný element roztahoval na výšku přes celou stránku. Jak na to? Mohl bych to udělat přes javascript, ale abych věděl do budoucna :-) .

Takhle se mi roztahuje jen na výšku okna browseru...
Kód: Vybrat vše
<html>
    <head>
      <title>Example</title>
        <style>
           #longElement
         {
            position: absolute;
            left: 300px;
            height: 1000px;
            width: 400px;
            background-color: red;
         }
         
         #topToBottomElement
         {
            position: absolute;
            background-color: black;
            height: 100%;
            width: 100px;
         }
        </style>
    </head>
    <body>
       <div id="longElement"></div>
      <div id="topToBottomElement"></div>
    </body>
</html>
Přílohy
example.png
PiranhaGreg
Mírně pokročilý
Uživatelský avatar

Odeslat příspěvekod karlos00x 6. 1. 2013 12:56

co je cilem cviceni? je to pozadi pres celou stranku nebo tam ma byt i nejaky obsah?
Upgrade který má smysl: SSD. Zažijete svižný počítač.
karlos00x
Pokročilý

Odeslat příspěvekod PiranhaGreg 6. 1. 2013 13:10

Je tam i obsah... tlačítka co přepínají tu tabulku vlevo.
Přílohy
gothic.png
PiranhaGreg
Mírně pokročilý
Uživatelský avatar

Odeslat příspěvekod x-rated 6. 1. 2013 15:52

jestli to dobře chápu, de o ten černej proužek vlevo - ten má bejt vždycky odshora až dolu, že? bych to asi udělal přes position fixed s vejškou 100%, to by mohlo fungovat...
Dell UP2715K 27" AH-IPS 5120x2880 • Asus Maximus VIII Gene • Intel Core i7-7700K @ 5 GHz • Corsair Vengeance @ 3,6 GHz, 32 GB • Samsung 960 Pro - 1 TB • Creative SoundBlaster X-Fi Titanium HD • MSI GTX 1080 Ti Gaming X @ 2/11 GHz
x-rated
Junior
Uživatelský avatar

Odeslat příspěvekod gandor 7. 1. 2013 01:55

Potrebujes dat parentovy position:relative, aby pocitalo vysku od toho parenta (a nie od window, ktory ma vysku len viditelnej casti).

Kód: Vybrat vše
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Test position absolute + 100% vyska</title>
  </head>
  <body>
    <div style="height:850px;border:3px solid black;position:relative;width:200px">
       <div style="position:absolute;height:100%;width:50px;background:red;left:0;top:0;">aaa</div>
    </div>
  </body>
</html>


PS. Position fixed sice bude fungovat, ale roby nieco ine...
gandor
Mírně pokročilý

Odeslat příspěvekod NefroniK 20. 2. 2013 13:26

Skús to dať pred koniec body, a CSS takto:
position: absolute; top: 0; left: 0; bottom: 0; width: 80px;
NefroniK
Junior


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků