Avatar billede mr_bula Nybegynder
29. maj 2006 - 14:04 Der er 35 kommentarer og
1 løsning

Div med height=100% følger ikke med bunden

Hejsa...

Jeg har opbygget en side i div'er. Udenom alle div'erne har jeg en div der hedder "content". I den har jeg sagt at height skal være 100%, men når man scoller nedeaf følger div'ens bund ikke med. Den bliver stående. Har pgså prøvet med height: auto; men her stikker resten af indhold (div'erne) ud.

Her er indholdet i content:

#content {
    position: absolute;
    width: 770px;
    height: 100%;
    top: -1px;
    left: 50%;
    margin-left: -375px;
    margin-right: 20px;
    background-color: #FFFFFF;
    border: 1px solid black;
}
Avatar billede z1n Nybegynder
29. maj 2006 - 14:10 #1
jeg er med på en lytter ... det jeg plejer at få af vide af de lærte: "man laver ikke height: 100% hjemmesider"
Avatar billede mr_bula Nybegynder
29. maj 2006 - 14:15 #2
Nå... Vil de så have at man skal definere sin højde permanent? I mit tilfælde gælder det bare, at der er stor foskel på mine sideres højde. Nogle er 900 px høje andre 400 px. Og synes ikke det ser så godt ud med 500 px tom scroll...
Avatar billede fennec Nybegynder
29. maj 2006 - 14:24 #3
z1n >>
Man kan godt lave 100% højde, men det skal angives på body taget også :o)

mr_bula >>
At bunden ikke følger med, kan skyldes mange ting (CSS, validering, opbygning). Det bedste ville være at smide et link til din side, så vi kan se kildekoden. Dit CSS er ikke nok information.
Avatar billede plazm Nybegynder
29. maj 2006 - 14:42 #4
100% højde svarer til 100% af browserens viewport. Dvs, det du kan se uden at scrolle, det er 100%.

Så den viser det ganske korrekt.
Avatar billede plazm Nybegynder
29. maj 2006 - 14:45 #5
Jeg har lige lavet et lille hack. Ved ikke om det virker i alle browsere, men det var en mulighed:

<html style="margin:0px;padding:0px;height:100%;">
  <body style="margin:0px;padding:0px;height:100%;background:#F00;">
    <div style="margin:0 auto;width:600px;background:#FFF;position:relative;top:0px;min-height:100%;bottom:0px;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    </div>
  </body>
</html>

http://plazm.dk/projekter/testprojekter/div100height.php
Avatar billede plazm Nybegynder
29. maj 2006 - 14:50 #6
<style type="text/css">
html, body {
  margin:0px;
  padding:0px;
  height:100%;
  background:#F00;
}
body div {
  height: 100%;
  margin:0 auto;
  width:600px;
  background:#FFF;
  position:relative;
  top:0px;
  bottom:0px;
}
body > div {
  height: auto;
  min-height:100%;
}
    </style>
  </head>
  <body>
    <div>

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
    </div>
  </body>
Avatar billede mr_bula Nybegynder
29. maj 2006 - 16:33 #7
Link: http://www.dinbror.dk/eksperten/

Problemet er at div'en hvor der står "her" i går ud over "content" div'en. "Content" div'en skulle gerne følge "gallery" div'en
Avatar billede zynzz Praktikant
29. maj 2006 - 19:27 #8
Måske noget med margin:<body topmargin="0" bottommargin="0">

altså jeg plejer ikke at have nogle problemer med height="100%", det virker på både firefox og IE
Avatar billede mclemens Nybegynder
29. maj 2006 - 19:43 #9
<body topmargin="0" bottommargin="0">
^ ikke på body ;)

html,body{margin:0px;padding:0px;}
i css :)

- lidt nysgerrig ... kigger på den om lidt ...
Avatar billede mclemens Nybegynder
29. maj 2006 - 19:44 #10
html,body{margin:0px;padding:0px;height:100%}
(ups :) ... løser dog ikke problemet)
Avatar billede zynzz Praktikant
29. maj 2006 - 20:02 #11
Har du så prøvet at indsætte det i body og lade være med at indsætte det som css ?
Avatar billede mclemens Nybegynder
29. maj 2006 - 20:07 #12
ja, nu har jeg - troede du havde testet siden du skrev igen ?
... eller gør jeg noget forkert da?
Avatar billede mclemens Nybegynder
29. maj 2006 - 20:28 #13
sådan???
(ret lige billede kilden...)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><title>Titel</title></head>

<style type="text/css">

html,body{
    margin:0px;padding:0px;
    font:15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #fff url('bg.jpg');
    height: 100%;
}


#content {
    position:relative;
    margin:0px auto;
    width: 770px;
    height: 100%;
    background: #FFF;
    border: 1px solid #000;
    border-width:0px 1px;
}


#toplogo {
    float:left;
    width:170px;
    height:200px;
    margin: 15px 0px 0px 8px;
}


#menu {
    position:absolute;
    left:15px;
    top:180px;
    width:170px;
    background: #FFF;
    border: 1px solid #000;
}


#topkasseout {
    float:right;
    width: 555px;
}


#topkasseinn {
    float:left;
    width: 540px;
}

 
#galleryout {
    float:right;
    width: 555px;
}


#galleryinn {
    float:left;
    width: 540px;
    height: 700px;
    margin-top: 15px;
    border: 1px solid black;
}


.menuOverskrift {
    width: 100%;
    height: 20px;
    text-align: center;
    font-weight: bold;
    background: #555;
    color: #FFF;
    font-size: 14px;
}


ul.navigation {
    list-style-type: square;
    font:12px verdana;
}


#banner {
    text-align: center;
    margin: 10px 0px;
}


#topgallery {
    float:right;
    width: 485px;
    height: 100px;
    margin-top: 15px;
    border: 1px solid black;
}


#tophead{
    width: 100%;
    height: 20px;
    font-weight: bold;
    background: #555555;
    color: #FFF;
    font-size: 14px;
}




</style></head>
<body topmargin="0" bottommargin="0">
<div id="content">
    <div id="toplogo"><img src="123_files/toplogo.htm" alt="test"></div>

    <div id="menu">

        <div class="menuOverskrift">Main Navigation</div>

        <ul class="navigation">
        <li><a href="#">Test 1</a></li>
        <li><a href="#">Test 2</a></li>
        </ul>

        <div class="menuOverskrift">Main Navigation2</div>

        <div id="banner"><img src="123_files/logo.htm" alt="test" border="1"><br>
            <img src="123_files/logo.htm" alt="test" border="1" />
        </div>

    </div>

    <div id="topkasseout"><div id="topkasseinn">

        <div id="topgallery"><div id="tophead"> - Popular Galleries</div>
        hej hej igen
        </div>
    </div></div>


    <div id="galleryout"><div id="galleryinn">her
    </div></div>

</div>

</body></html>
Avatar billede mclemens Nybegynder
29. maj 2006 - 20:29 #14
lidt div's inden i div's grundet et float margin problem der eller opstår ... og brugt float mest istedet for position absolute af gensyn til rammen ... og forkortet css en lille smule...
Avatar billede mclemens Nybegynder
29. maj 2006 - 20:31 #15
arg, glemte at slette topmargin igen *doh* validerer lige og reposter
Avatar billede mclemens Nybegynder
29. maj 2006 - 20:36 #16
sådan :) , så validerer den :)




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html;

charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><title>Titel</title>

<style type="text/css">

html,body{
    margin:0px;padding:0px;
    font:15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #fff url('bg.jpg');
    height: 100%;
}


#content {
    position:relative;
    margin:0px auto;
    width: 770px;
    height: 100%;
    background: #FFF;
    border: 1px solid #000;
    border-width:0px 1px;
}


#toplogo {
    float:left;
    width:170px;
    height:200px;
    margin: 15px 0px 0px 8px;
}


#menu {
    position:absolute;
    left:15px;
    top:180px;
    width:170px;
    background: #FFF;
    border: 1px solid #000;
}


#topkasseout {
    float:right;
    width: 555px;
}


#topkasseinn {
    float:left;
    width: 540px;
}

 
#galleryout {
    float:right;
    width: 555px;
}


#galleryinn {
    float:left;
    width: 540px;
    height: 700px;
    margin-top: 15px;
    border: 1px solid black;
}


.menuOverskrift {
    width: 100%;
    height: 20px;
    text-align: center;
    font-weight: bold;
    background: #555;
    color: #FFF;
    font-size: 14px;
}


ul.navigation {
    list-style-type: square;
    font:12px verdana;
}


#banner {
    text-align: center;
    margin: 10px 0px;
}


#topgallery {
    float:right;
    width: 485px;
    height: 100px;
    margin-top: 15px;
    border: 1px solid black;
}


#tophead{
    width: 100%;
    height: 20px;
    font-weight: bold;
    background: #555555;
    color: #FFF;
    font-size: 14px;
}

img.siteb{border:1px solid #fff}


</style></head>
<body>
<div id="content">
    <div id="toplogo"><img src="123_files/toplogo.htm" alt="test" /></div>

    <div id="menu">

        <div class="menuOverskrift">Main Navigation</div>

        <ul class="navigation">
        <li><a href="#">Test 1</a></li>
        <li><a href="#">Test 2</a></li>
        </ul>

        <div class="menuOverskrift">Main Navigation2</div>

        <div id="banner"><img src="123_files/logo.htm" alt="test" class="siteb" /><br />
            <img src="123_files/logo.htm" alt="test" class="siteb" />
        </div>

    </div>

    <div id="topkasseout"><div id="topkasseinn">

        <div id="topgallery"><div id="tophead"> - Popular Galleries</div>
        hej hej igen
        </div>
    </div></div>


    <div id="galleryout"><div id="galleryinn">her
    </div></div>

</div>

</body></html>
Avatar billede mclemens Nybegynder
29. maj 2006 - 20:40 #17
... måske denne css rettelse? (top:150px; -> top:132px;)

#menu {
    position:absolute;
    left:15px;
    top:132px;
    width:170px;
    background: #FFF;
    border: 1px solid #000;
}


Du kan også indsætte xml deklarationen, men så skal vi have 2x text-align sat ind i henholdsvis body og content - prøv denne her ... hvis det er ?
- siden er ens med IE i quirks og css mode



<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html;

charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><title>Titel</title>

<style type="text/css">

html,body{
    margin:0px;padding:0px;
    font:15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #fff url('bg.jpg');
    height: 100%;
    text-align:center;
}


#content {
    text-align:left;
    position:relative;
    margin:0px auto;
    width: 770px;
    height: 100%;
    background: #FFF;
    border: 1px solid #000;
    border-width:0px 1px;
}

... og resten af sidste post ...
Avatar billede mclemens Nybegynder
29. maj 2006 - 20:41 #18
^ av, ombrudt ... ryk evt. linjer sammen
Avatar billede mclemens Nybegynder
29. maj 2006 - 20:42 #19
- siden er ens med IE i quirks og (css mode) <- skulle have stået ikke quirks
Avatar billede mclemens Nybegynder
30. maj 2006 - 01:07 #20
Pinligt, pinligt glemte at checke ordentligt i FF efter at jeg havde øget menuens højde ... pinligt // undskyld :|
Avatar billede mclemens Nybegynder
30. maj 2006 - 01:41 #21
jeg gør det lige lidt anderledes og kommer med to links ...
nu har s** spammet så meget så jeg må gøre lidt for løsningen ...
Avatar billede mclemens Nybegynder
30. maj 2006 - 01:51 #22
- Poster den istedet ... denne gang har jeg checket :D

Det kan dog sikkert gøre nemmere ... men jeg er ikke lige vant til borders ... man kan selvfølgelig også bruge tables (dog er det ikke altid populært) ... eller evt. et javascript til højde synkronisering ... og det er ikke godt hvis man kan undgå det :/

... gid man kunne slette et par indlæg - eller have brugt vedhæftede filer istedet :/



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html;

charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><title>Titel</title>

<style type="text/css">

html,body{
    margin:0px;padding:0px;
    font:15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #fff url('bg.jpg');
    height: 100%;
    overflow:hidden;
}

#outer{position:relative;width:100%;height:100%;overflow-y:scroll;}

#content {
    position:relative;
    margin:0px auto;
    width: 740px;
    background: transparent;
    height:100%;
    padding-left:10px;
}


#toplogo {
    position:absolute;
    left:15px;
    top:15px;
    width:236px;
    height:100px;
    border:1px solid #000;
}


#menu {
    position:absolute;
    left:15px;
    top:132px;
    width:170px;
    background: #FFF;
    border: 1px solid #000;
    margin-bottom:15px;
}


#topkasse{
    position:absolute;
    right:-5px;
    top:0px;
}


#gallery{
    position:absolute;
    right:-5px;
    top:132px;
    width: 549px;
    height: 700px;
    border: 1px solid black;
}


.menuOverskrift {
    width: 100%;
    height: 20px;
    text-align: center;
    font-weight: bold;
    background: #555;
    color: #FFF;
    font-size: 14px;
}


ul.navigation {
    list-style-type: square;
    font:12px verdana;
}


#banner {
    text-align: center;
    margin: 10px 0px;
}


#topgallery {
    float:right;
    width: 485px;
    height: 100px;
    margin-top: 15px;
    border: 1px solid black;
}


#tophead{
    width: 100%;
    height: 20px;
    font-weight: bold;
    background: #555555;
    color: #FFF;
    font-size: 14px;
}

img.siteb{border:1px solid #fff}

#rammeboks{
    position:absolute;
    left:50%;
    margin:0px 0px 0px -385px;
    width: 770px;
    background: #FFF;
    height:100%;
    border: 1px solid #000;
    border-width:0px 1px;
}

#bundmargin{font-size:1px;height:15px;position:absolute;bottom:-15px;}
</style></head>
<body><div id="rammeboks">&nbsp;</div><div id="outer">


<div id="content">

    <div id="toplogo"><img src="123_files/toplogo.htm" alt="test" /></div>

    <div id="menu">

        <div class="menuOverskrift">Main Navigation</div>

        <ul class="navigation">
        <li><a href="#">Test 1</a></li>
        <li><a href="#">Test 2</a></li>
        </ul>

        <div class="menuOverskrift">Main Navigation2</div>

        <div id="banner"><img src="123_files/logo.htm" alt="test" class="siteb" /><br />
            <img src="123_files/logo.htm" alt="test" class="siteb" />
        </div>

    </div>


<div id="topkasse">

        <div id="topgallery"><div id="tophead"> - Popular Galleries</div>
        hej hej igen
        </div>
    </div>

    <div id="gallery">Galleri<br />
    <div id="bundmargin">&nbsp;</div>
    </div>

</div>

</div></body></html>
Avatar billede mclemens Nybegynder
30. maj 2006 - 01:56 #23
og en alternativ css til ovenstående ... nok lidt bedre :)


<style type="text/css">

html,body{
    margin:0px;padding:0px;
    font:15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #fff url('bg.jpg');
    height: 100%;
    overflow:hidden;
}

#outer{position:relative;width:100%;height:100%;overflow-y:scroll;}

#content {
    position:relative;
    margin:0px auto;
    width: 740px;
    background: transparent;
    height:100%;
    padding-left:10px;
}


#toplogo {
    position:absolute;
    left:0px;
    top:15px;
    width:236px;
    height:100px;
    border:1px solid #000;
}


#menu {
    position:absolute;
    left:0px;
    top:132px;
    width:170px;
    background: #FFF;
    border: 1px solid #000;
    margin-bottom:15px;
}


#topkasse{
    position:absolute;
    right:0px;
    top:0px;
}


#gallery{
    position:absolute;
    right:0px;
    top:132px;
    width: 549px;
    height: 700px;
    border: 1px solid black;
}


.menuOverskrift {
    width: 100%;
    height: 20px;
    text-align: center;
    font-weight: bold;
    background: #555;
    color: #FFF;
    font-size: 14px;
}


ul.navigation {
    list-style-type: square;
    font:12px verdana;
}


#banner {
    text-align: center;
    margin: 10px 0px;
}


#topgallery {
    float:right;
    width: 485px;
    height: 100px;
    margin-top: 15px;
    border: 1px solid black;
}


#tophead{
    width: 100%;
    height: 20px;
    font-weight: bold;
    background: #555555;
    color: #FFF;
    font-size: 14px;
}

img.siteb{border:1px solid #fff}

#rammeboks{
    position:absolute;
    left:50%;
    margin:0px 0px 0px -395px;
    width: 770px;
    background: #FFF;
    height:100%;
    border: 1px solid #000;
    border-width:0px 1px;
}

#bundmargin{font-size:1px;height:15px;position:absolute;bottom:-15px;}
</style>
Avatar billede mclemens Nybegynder
30. maj 2006 - 02:49 #24
og en løsning med float istedet ... nok den bedste af de to...
ww w.dk if.com/users/clemens/1.html <- fjern mellemrum ...

- undskyld de mange forsøg ... sidste udgave er lavet udfra plazm's css hack i
http://www.eksperten.dk/spm/712486#rid6283513 (som jeg overså) ... så hvis du vælger løsningen i linket (hvis kilde og gem - så er det ikke mine, men hans point)

og undskyld den lange tråd igen ... skal nok vænne mig til at checke FF noget oftere...
Avatar billede mr_bula Nybegynder
30. maj 2006 - 19:58 #25
Du skal ikke undskylde.. Dejligt at nogen vil hjælpe. Skal lige teste dem igennem og så vender jeg tilbage. Tak for hjælpen indtil videre....
Avatar billede z1n Nybegynder
01. juni 2006 - 22:31 #26
bare lige for at være spydig så vil dette virke uden problemer med tables :P
Avatar billede mr_bula Nybegynder
12. juni 2006 - 00:27 #27
Ja ved det virker med table, men nu skal det lykkes for mig at lave en side kun i div'er ;)

Indholdet i #gallery bliver "include" vha PHP, og dens højder er forskellige.. Opg. er så vil content div'en nå bunden?? Kan det ikke laves på en eller anden måde med margin-bottom???
Avatar billede mclemens Nybegynder
12. juni 2006 - 00:37 #28
gallery vil aldrig nå bunden da den har en margin-bottom...
du kan nok lave noget fusk med et par div oven i hinanden med padding-bottom eller andet også... men jeg er ikke helt sikker på hvorfor den med margin-bottom ikke virkede ...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html;

charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" /><title>Titel</title>

<style type="text/css">

html,body{
    margin:0px;padding:0px;
    font:15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    background: #fff url('bg.jpg');
    height: 100%;
}

#content {
    position:relative;
    margin:0px auto;
    width: 740px;
    background: #fff;
    border: 1px solid #000;
    border-width:0px 1px;
    padding:0px 15px;
    min-height:100%;
}

body > div {
  height: auto;
  min-height:100%;
}

#toplogo {
    float:left;
    width:230px;
    height:100px;
    border:1px solid #000;
    margin:15px 0px 13px 0px;
}


#menu {
    float:left;
    width:170px;
    background: #FFF;
    border: 1px solid #000;
    margin-bottom:13px;
}


#gallery{
    float:right;
    width: 551px;
    height: 700px;
    border: 1px solid black;
    margin:0px 0px 13px 0px;
}


.menuOverskrift {
    width: 100%;
    height: 20px;
    text-align: center;
    font-weight: bold;
    background: #555;
    color: #FFF;
    font-size: 14px;
}


ul.navigation {
    list-style-type: square;
    font:12px verdana;
}


#banner {
    text-align: center;
    margin: 10px 0px;
}


#topgallery {
    float:right;
    width: 491px;
    height: 100px;
    border: 1px solid black;
    margin:15px 0px 13px 0px;
}


#tophead{
    width: 100%;
    height: 20px;
    font-weight: bold;
    background: #555555;
    color: #FFF;
    font-size: 14px;
}

img.siteb{border:1px solid #fff}

div.clearer{height:2px;overflow:hidden;font-size:1px;clear:both;}
</style></head>
<body>

<div id="content">

    <div id="toplogo"><img src="123_files/toplogo.htm" alt="test" /></div>

    <div id="topgallery"><div id="tophead"> - Popular Galleries</div>

    hej hej igen
    </div>

<div class="clearer">&nbsp;</div>

    <div id="menu">

        <div class="menuOverskrift">Main Navigation</div>

        <ul class="navigation">
        <li><a href="#">Test 1</a></li>

        <li><a href="#">Test 2</a></li>
        </ul>

        <div class="menuOverskrift">Main Navigation2</div>

        <div id="banner"><img src="123_files/logo.htm" alt="test" class="siteb" /><br />
            <img src="123_files/logo.htm" alt="test" class="siteb" />
        </div>

    </div>

    <div id="gallery">Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />Galleri<br />v</div>

<div class="clearer">&nbsp;</div>

</div>
</body></html>
Avatar billede mclemens Nybegynder
12. juni 2006 - 00:39 #29
Når nu vi snakker tables vs. divs så legede også med en anden height
100% idag ... dog kan en sådan ting drille noget så forfærdeligt ... :D


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;}
</style>
</head>
<body><div style="position:relative;top:0px;left:0px;background:#aaa;height:100%;width:100%;background:#fff;overflow-y:auto;overflow-x:hidden;">


<div style="position:absolute;top:0px;left:0px;background:#aaa;height:50px;width:100%;">Test</div>


<div style="position:absolute;top:0px;height:100%;"><div style="position:relative;margin-top:50px;">Start<br>Test<br><br>Test<br>Test<br><br>Test<br>Test<br>Test<br><br>Slut<div style="height:50px;">&nbsp;</div>


<div style="position:absolute;bottom:50px;left:0px;background:#aaa;height:50px;width:100%;">Test</div>

</div></div>

</div></body></html>
Avatar billede mr_bula Nybegynder
12. juni 2006 - 01:15 #30
har kopieret koden fra kommentaren 12/06-2006 00:37:01, og her går teksten "galleri" ud over div'erne!
Avatar billede mr_bula Nybegynder
12. juni 2006 - 01:16 #31
har fundet fejlen; i #gallery skal height være auto;
Avatar billede mr_bula Nybegynder
12. juni 2006 - 01:18 #32
Smid et svar, så du kan få dine velfortjente point
Avatar billede mclemens Nybegynder
12. juni 2006 - 01:23 #33
ok :)
Avatar billede mclemens Nybegynder
12. juni 2006 - 01:27 #34
hehe, kan godt se den nu :D - checkede kun i IE ... :P
Du behøver forresten ikke at skrive height:auto; det er den normalt...
- Men alle andre steder hvor height skal kunne ændres bør man ikke definere en height på elementet heller ...

IE overholder ikke en height definering som max height ... den læser det som minimums height - medmindre den har en overflow:hidden;  / overflow:auto; på sig også...
Avatar billede mclemens Nybegynder
12. juni 2006 - 01:28 #35
- og tak for point :)
Avatar billede mclemens Nybegynder
12. juni 2006 - 01:34 #36
Vælger lige at kaste halvdelen eller mere hvis plazm
ønsker det ... jeg brugte jo hans IE hack :o)
Plazm -> http://www.eksperten.dk/spm/714877
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester