ugrás a tartalomhoz

Position:absolute és a magasság

fecso · 2012. Szep. 19. (Sze), 09.48
Sziasztok!

Egy oldal aljára szeretnék absolute pozicionálni egy egész tartalmat, de sajnos a böngésző átméretezésekor az alsó fele eltűnik és a gördítősáv nem jelenik meg. Gondolom azért, mert a konténer nem kap méretet. Hogyan lehetne ezt szépen megoldani? Köszönöm
‹ css3 div háttere Textarea háromszög/nyíl ›
 ■
1

Hogyan?

Poetro · 2012. Szep. 19. (Sze), 09.55
Hogyan pozicionáltad az oldal aljára? Tudnál mutatni egy példát?
2

http://jsfiddle.net/N4aHQ/emb

fecso · 2012. Szep. 19. (Sze), 10.41
http://jsfiddle.net/N4aHQ/embedded/result/ a probléma a böngésző ablakának csökkentésénél látható.
3

http://fiddle.jshell.net/N4aH

Poetro · 2012. Szep. 19. (Sze), 10.49
http://fiddle.jshell.net/N4aHQ/show/light/
Nekem teljesen jól néz ki átméretezve is. És természetesen a gördítősáv nem fog megjelenni, mivel az összes tartalom abszolút van pozicionálva.
4

Az éles oldal, ahol ez

fecso · 2012. Szep. 19. (Sze), 11.00
Az éles oldal, ahol ez szerepel jóval magasabb, így egy 300pixeles csökkentés is látványos eredményeket produkál. Gördítősáv viszont kellene.

germany.travel oldalon valami hasonló módszerrel van megoldva, de annyira furán, hogy nem bírtam kibogarászni.
5

Padding

Poetro · 2012. Szep. 19. (Sze), 13.29
germany.travel oldalon valami hasonló módszerrel van megoldva, de annyira furán, hogy nem bírtam kibogarászni.

Az a különbség, hogy ott a tartalom alatt van egy 55px-es padding. És ehhez nem is nagyon kellett bogarászni, 2 kattintás után kiderült.
6

Ráadásul még sok más is van.

fecso · 2012. Szep. 19. (Sze), 15.16
Ráadásul még sok más is van. A paddingot levéve ugyan úgy görgethető marad az oldal.

..ha ugyan arról beszélünk
div.layoutPage div.layoutPageBody {
    padding-bottom: 55px;
}
7

http://jsfiddle.net/Poetro/Cg

Poetro · 2012. Szep. 19. (Sze), 16.04
http://jsfiddle.net/Poetro/Cgb2G/1/
8

A baj vele, hogy az alsó

fecso · 2012. Szep. 19. (Sze), 16.53
A baj vele, hogy az alsó résznek a szélessége 100% kell hogy legyen és pontosan nemtudom hogy az a 400px valóban annyi e. Valami más megoldás kellene rá?! Nem is tudom mi lenne a jó
9

Kis js talán segit

Dömcsi · 2012. Szep. 19. (Sze), 21.17
<!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=utf-8" />
<title>absolute</title>

<style type="text/css" media="screen">
html, body {
height: 100%;
margin:0 auto;
padding:0;
min-width:1000px;
background-color: #0f0;
}

#fodiv {
background-color: #ccc;
width:100%;
min-height: 100%;
position:relative;

margin:0 auto;
overflow:auto;
}

#teteje {
width: 980px;
position: relative;
margin:0 auto;
}

#alja	{
position:absolute;
bottom:0;
width:100%;
background: #080;

}

#okozep { 
position:absolute; 
top:0;
bottom:100px;
left:50%;
right:50%;
margin-left:-490px;
margin-right:-490px;
background-color: #00f;
}
</style>


</head>

<body>

<div id="fodiv">
<div id="okozep"></div>
<div id="teteje">
id="teteje"

</div>

<div id="alja">
<img src="http://www.zwani.com/graphics/hello/images/10.gif" style="margin:20px;" />
<br />

</div>
</div>


<script type="text/javascript">
magassag = document.getElementById('alja').offsetHeight;
ss = magassag + 20;
document.getElementById('teteje').style.marginBottom = ss + 'px';
window.onresize = function() {
magassag = document.getElementById('alja').offsetHeight;
ss = magassag + 20;
document.getElementById('teteje').style.marginBottom = ss + 'px';
}
</script>
</body>

</html>