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!

■

HTML, CSS, JavaScript, Ajax

csirip

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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">
<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>

<!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>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

A #wrap-nek adj egy overflow:

LeGaS · 2010. Már. 4. (Cs), 17.10

A #wrap-nek adj egy overflow: hidden; tulajdonságot.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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>


<!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!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés