Autor Zpráva
OBr
Profil
Ahoj.
Podívejte se prosím na následujicí příklad.
<style media="all" type="text/css">

/* <![CDATA[ */
body {
margin:0;
}
#horni-lista {
width:100%;
height: 20%;
background-color: #d4d0c8;
}
#hlavni {
position:absolute;
left:0;
top:0px;
width:100%;
height:100%;
overflow:auto;
}
#obsah {
position:absolute;
overflow:auto;
height:80%;
}
/* ]]> */
</style>
<div id="hlavni">
<div id="horni-lista">Horni lista</div>
<div id="obsah">
hodne dlouhy text .......
</div>
</div>

Teď ma horni-lista 20%, obsah 80. Nevěděli by jste jak to předělat tak, aby horní horni-lista měla výšku např. 20px a obsah zbytek? Ten overflow u obsahu potřebuji zachovat.
Děkuji
pety
Profil
ahoj nevim jestli jsem se trefil do toho co potrebujes, ale koukni na tohle:

<!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=iso-8859-1" />
<title>Nepojmenovan dokument</title>
<style media="all" type="text/css">

/* <![CDATA[ */

body {

margin:0;

}

#horni-lista {

width:100%;

height: 80px;

background-color: #d4d0c8;

}

#hlavni {

position:absolute;

left:0;

top:0px;

width:100%;

height:100%;

overflow:auto;

}

#obsah {

position:absolute;

overflow:auto;

height:100%;

width:100%;

background-color: #FF00FF;

}

/* ]]> */

</style>
</head>

<body>

<div id="hlavni">

<div id="horni-lista">Horni lista</div>

<div id="obsah">

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

</div>

</div>

</body>
</html>
OBr
Profil
Je to skoro ono. Problém je ze obsah má teď 100% výšky obrazovky a horni-lista 80px. Já potřebuju aby měl obsah výšku 100%-výška horni-lista.
pety
Profil
já asi pořád nechápu co přesně máš na mysli aby to dělalo.... koukni na tohle....

a skus mi napsat co chceš aby to dělalo......

http://eurostar.wz.cz/jakpsatweb/html1.htm ( overflow:auto; nadefinovaný i u obsahu, i u hlavni ( vsimni si cerny ramecek ohranicuje div hlavni )

http://eurostar.wz.cz/jakpsatweb/html2.htm ( overflow:auto; nadefinovaný jen u obsahu, ( vsimni si cerny ramecek ohranicuje div hlavni )

http://eurostar.wz.cz/jakpsatweb/html3.htm ( overflow:auto; nadefinovaný jen u obsahu, odebrána absolutní pozice u obsahu ( vsimni si cerny ramecek ohranicuje div hlavni , nyní ohraničuje i div obsahu )
OBr
Profil
Chtěl bych to 3. řešení, ale aby se mi scrooloval pouze obsah obsahu. A aby výška_obsahu+výška_horni-lista byla 100% výšky zobrazitelné části, ne 100%+výška_horni-list jak to máš teď.
pety
Profil
tak ted jsem sam zaskocenej, myslel jsem že to nebude problém že se výška nastaví podle okna na 100% okna apokud ji obsah překročí začne se scrollovat, nicméně to nefunguje. v tuhle chvíli mne nenapada jak to napozicovat relativně tak, aby to fungovalo.

pokud můžeš použít pevné pozicování pak neni probém a řešení je takhle

<!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=iso-8859-1" />
<title>Nepojmenovan dokument</title>
<style media="all" type="text/css">

/* <![CDATA[ */

body {

margin:0;

}

#horni-lista {

width:100%;

height: 40px;

background-color: #d4d0c8;

}

#hlavni {

width:100%;

height:500px;

border:solid 2px #000000;

overflow:hidden;


}

#obsah {

overflow:auto;

height:460px;

width:100%;

background-color: #FF0000;
}

/* ]]> */

</style>
</head>

<body>

<div id="hlavni">

<div id="horni-lista">Horni lista</div>

<div id="obsah">

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text .......

hodne dlouhy text ....... hodne dlouhy text ....... hodne hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text .......

hodne dlouhy text ....... hodne dlouhy text ....... hodne hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafdhodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text .......

hodne dlouhy text ....... hodne dlouhy text ....... hodne hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text .......

hodne dlouhy text ....... hodne dlouhy text ....... hodne hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text .......

hodne dlouhy text ....... hodne dlouhy text ....... hodne hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafdhodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text .......

hodne dlouhy text ....... hodne dlouhy text ....... hodne hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text .......

hodne dlouhy text ....... hodne dlouhy text ....... hodne hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy asdfasdfdsafd
hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dl
pety
Profil
aaa tak pardon nejak jsem se nevesel do velikosti prispevku :-)

<!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=iso-8859-1" />
<title>Nepojmenovan dokument</title>
<style media="all" type="text/css">

/* <![CDATA[ */

body {

margin:0;

}

#horni-lista {

width:100%;

height: 40px;

background-color: #d4d0c8;

}

#hlavni {

width:100%;

height:500px;

border:solid 2px #000000;

overflow:hidden;


}

#obsah {

overflow:auto;

height:460px;

width:100%;

background-color: #FF0000;
}

/* ]]> */

</style>
</head>

<body>

<div id="hlavni">

<div id="horni-lista">Horni lista</div>

<div id="obsah">

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

hodne dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text

....... hodne dlouhy text ....... hodne dlouhy asdfasdfdsafd hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne

dlouhy text ....... hodne dlouhy text ....... hodne dlouhy text .......

hodne dlouhy text ....... hodne dlouhy text ....... hodne hodne dlouhy

text ....... hodne dlouhy text ....... hodne dlouhy text ....... hodne




</div>

</div>

</body>
</html>

jinak ted mne fakt nenapada jak to napozicovat relativně. pokud někdo ví, samotného by mne to zajímalo...
Toto téma je uzamčeno. Odpověď nelze zaslat.

0