ugrás a tartalomhoz

height: 100%, tartalom nélkül is

TIV · 2010. Már. 4. (Cs), 14.52
Sziasztok!

Érdekes problémám van. Adott:

- Egy fix magas header
- Alatta két oszlop, egyik 190px, a másik a maradék területen van.

Egyszerűen nem tudom megoldani, hogy ennek a két oszlopnak a magassága lenyúljon a böngésző aljáig és ne tovább. faux oszlopokkal nem jó, nem csak azt a látszatot kell kelteni-e, hogy leér az aljáig, hanem valóban ott kellene a végének lenni, mert lesznek benne div-ek, amiknek szintén height: 100% tulajdonságuk lesz.

Odáig sikerült megcsinálni, hogy az oszlopok lenyúlnak, de sajnos tovább nyúlnak, mint a böngésző, mégpedig pontosan a header kép magassával lóg túl. Hogy lehetne ezen javítani?

Nagyon köszönöm!
‹ Szövegdoboz help! spamszűrés ›
 ■
1

Padding?

zila · 2010. Már. 4. (Cs), 16.17
Nem küldtél kódot vagy még inkább url-t egy teszt lapra, így csak vaktában lehet lődözni...

Az én vaklövésem:
Az oszlopaid kezdődjenek a lap tetején, a header lebegjen fölöttük z-index > oszlop z-index (ez csak akkor kell, ha az oszlopoknak van háttere/kerete) aztán az oszlopok tartalmát meg padding-gal nyomod a header alá.
2

jó ötlet, deeee

TIV · 2010. Már. 4. (Cs), 16.51
Szia!

Az oldalamnak hasonló ehhez a felépítése. Nagyon jól megmutatja a hibát, pontosan a header magasságával lóg ki a böngészőből az oldal. próbáltam megcsinálni ahogy ajánlatottad, de ugyanaz lett a gond (lehet Neked sikerül!!!). Ha kiszedem a headert, a #menu, #content, #inner-wrap elemek minden padding-top, margin-top beállításra ugyanúgy reagálnak. Amennyivel lejjebb tolom őket, annyival fognak kilógni az oldal a böngészőből. Helyettem beszéljen a példa....

ELŐRE IS KÖSZÖNÖM!!!!!!!!!!!

PÉLDA A PROBLÉMÁRA ITT!

ui: a zöld divnek, hogy tudnék olyan width-et adni, hogy kitöltse a képernyőt jobbfele?

KÖSZÖNÖM!
6

valami ilyesmi

zila · 2010. Már. 4. (Cs), 17.13
No kicsit szüttyögtem vele :)
Nem annyira szép de jobbat nem tudtam kitalálni, csak Safariban teszteltem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0029)http://nezopont.eu/pelda.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><META http-equiv="Content-Type" content="text/html; charset=utf8">
<STYLE type="text/css"> 
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrap {
  height: 100%;
}

#header {
  background-color: blue;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
}
#inner-wrap {
  height: 100%;
}
#menu {
  width: 200px;
  background-color: red;
}
#menu, #content {
  float: left;
  height: 100%;
}
#content {
  background-color: green;
}
.content-spacer { 
  padding-top: 100px;
}
</STYLE>
</HEAD>
<BODY>
  <DIV id="wrap">
  	<DIV id="header">fejléc</DIV>
    <DIV id="inner-wrap">
      <DIV id="menu">
      	<div class="content-spacer">menu</div></DIV>
      <DIV id="content">
      	<div class="content-spacer">tartalom</div></DIV>
    </DIV>
  </DIV>
</BODY>
</HTML>
3

egyszerű

Blazé · 2010. Már. 4. (Cs), 16.53
tegyél a body-ra és a html-re is min-height=100%-ot, ugyanis minden elem aminek ezt a magasságot adtad meg a szülőjének a magasságát veszi 100%nak, na most ha egy divnek ezt adtad meg azt még nem mondtad meg neki hogy mihez képest 100%.

szal lényeg hogy body és html is legyen 100%-on.

edit: bár ahogy látom megpróbáltad ezt, akkor fogalmam sincs.
4

vélemény

TIV · 2010. Már. 4. (Cs), 17.08
Gyakorlatilag egész nap ezzel foglalkoztam és úgy gondolom, hogy amit akarok táblázatok nélkül nem lehet megcsinálni. Itt van egy jónak tűnő megoldás, ami a divekre display: table-t rak és úgy dolgozik velük mintha táblázatok lennének. Elég bonyolultnak néz ki elsőre, de működik!

http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html

ui: ha valaki megmondja az én verziómat, hogy lehet kijavítani, annak fejet hajtok! Köszönöm!
5

A #wrap-nek adj egy overflow:

LeGaS · 2010. Már. 4. (Cs), 17.10
A #wrap-nek adj egy overflow: hidden; tulajdonságot.
7

DEJÓÓÓ!

TIV · 2010. Már. 4. (Cs), 17.28
Remek! Köszönöm! és, hogy tudnám a zöld divre rábeszélni, hogy az oldal széléig kimenjen? mert width: 100% -ra aládobja a bal oldali div alá.

Nagyon köszönöm! Ügyes vagy!
8

yeah

zila · 2010. Már. 4. (Cs), 17.37
ÁÁÁÁÁÁ, tudtam, hogy van egy pofon egyszerű megoldás :)
Na akkor az én fenti cuccom felejtős, bonyolultabb markup, bonyolultabb css -> nem jó.
9

MEGOLDÁS

TIV · 2010. Már. 4. (Cs), 17.56
Megvan! A bal oldali divet kell csak float-olni, a jobb sima div, aminek van egy padding-left: 200px tulajdonsága. (200px, mert a bal oldali div is 200px). Semmi width: 100% NEM KELL!

Itt a megoldás:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css"> 
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrap {
 height: 100%;
 overflow: hidden;
}
#header {
  background-color: blue;
  height: 100px;
}
#inner-wrap {
  height: 100%;
}
#menu {
  width: 200px;
  background-color: red;
  float: left;
  height: 100%;
}
#content {
  background-color: green;
  height: 100%;
  padding-left: 200px;
}
</style>
</head>

<body>
  <div id="wrap">
    <div id="header"></div>
    <div id="inner-wrap">
      <div id="menu">menu</div>
      <div id="content">tartalom</div>
    </div>
  </div>
</body>
</html>
Köszönöm mindenkinek!