Full height tartalom div. Valaki esetleg?
Sziasztok!
Nagyon régóta keresek egy content div megoldást ami a böngésző ablakának teljesen kihasználja a magasságát...
Az oldal design szempontból nagyon egyszerű:
Navigation
Content
Footer meg logo meg egyéb ilyen okosság nem kell, mert saját szórakoztatásra készül az oldal ami készül.
Szóval a lényeg remélem érthető, szeretném ha a content div kitöltené teljesen a böngésző magasságát (fluid módon és ha több a content akkor persze legyen angyobb onnantól már vele)
body, html{
height: 100%;
}
#content{
height: 100%
vagy
height = 100% - navigation...
}
Ezeket mind próbálgattam mindhiába... A google tippjei se nagyon segítettek, hátha van akinek van most kapásból egy ilyen oldala :D
Köszi
válasza:Mindenek előtt "reseteld" a böngészők CSS-beállításait.
Több módszer is van: [link]
válasza:Azért a css annyira nem doctype függő, főleg nem ilyen szinten.
Igazából nem tudom milyen meggondolásból akarsz ilyet, de a tartalmi rész magasságát ha már létezik felette is egy div (header) csak css-sel pontosan az ablakhoz mérni nem lehetséges (vannak bizonyos matematikai műveletek, amit a css is enged, de az maszatolás), hacsak a header magasságát nem százalékban adod meg, hiszen ez esetben a content magasságát a fennmaradó % rész fogja kitenni, de ugye ez nem járható út, tartalmi torzuláshoz vezethet a headerben.
Szóval két út áll előtted.
1. Javascript. Beméred az ablak (window) magasságát, és aszerint állítod utána a content magasságot. Ezt ablakátméretezéskor is meg kell hívni. Ezt nem javaslom.
2. css trükkel: lényeg a látvány. A két divet (header, content) egyetlen befoglaló div-be helyezed, aminek a magassága a body 100%-a. A header magassága beállítható px-ben, a content magasságát nem állítod be, így az szabadon tágulhat. A hátteret, háttérképet - ami miatt a content-nek teljes magasságúnak kell lennie gondolom - a külső befoglaló div hátteréül állítod be (igazíthatod, hogy a header alatt jelenjen meg). Így úgy fog tűnni, mintha a content div a lap aljáig tartana. Ld: [link]
Sok sikert!
válasza:<style>
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
position: relative;
}
#container,
#header {
position: absolute;
right: 30px;
left: 30px;
}
#container {
top: 130px;
bottom: 30px;
background: #ccc;
}
#header {
top: 30px;
height: 100px;
background: #666;
}
</style>
<body>
<div id="header">
Fejléc
</div>
<div id="container">
Tartalom
</div>
</body>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!