CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

svoeber Nybegynder

25. oktober 2006 - 17:00 Der er 13 kommentarer og
1 løsning

100% højde på DIV med float

Spørgsmålet har netop været oppe at vende: Med en DIV sat 100% går den ikke med helt til bunden, hvis siden er længere end højden af viewport.
Jeg har i mit eksempel to kolonner, der flyder på hhv. venstre og højre side af indholds-blokken. I kolonnerne vil jeg gerne have en grafik, der følger indholdet helt til bund også når der skal scrolles.

I det forrige spørgsmål blev det anbefalet at bruge en baggrundsgrafik i BODY som med sikkerhed vil gå helt i bund.
Det er kan jeg desværre ikke bruge i mit tilfælde, da jeg rigtig gerne vil have alle sidens dimensioner til at være elastiske. Dvs. bredden på indholdskolonnen - og derved afstand ml. højre og venstre kolonne - skal ændre sig afhængig af den af brugeren valgte tekststørrelse.

_Kan_ det kan lade sig gøre - eller må jeg droppe enten layout-elasticitet eller grafikken?

Mit problem har jeg lagt online i en skrabet version:
http://www.cynope.com/eksperten.html

Synes godt om

Slettet bruger

25. oktober 2006 - 17:07 #1

Du kan jo gøre det med tables.
Ellers kunne jeg forestille mig at en div som shadowcontainer uden om din bd-div.

Men jeg synes tables er oplagte i dette tilfælde.

/1.

Synes godt om

udvikler Nybegynder

25. oktober 2006 - 17:17 #2

Du kan jo gøre sådan at du indeni din div lægger en tabel med en højde på 100%. Mon ikke den trækker div'en med? :-)

- så skal du bare huske at fjerne de 100% højde fra div'en

Synes godt om

Slettet bruger

25. oktober 2006 - 17:23 #3

Testet i FF og IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body, div {margin:0;padding:0;}

HTML, BODY {height: 100%;}
#doc {
width : 60em;
position : relative;
min-height : 100%;
height : 100%;
background-color : #DADADA;
}
#shadowcontainer {
width : 55em;
margin : auto;
background-color : #DADADA;
}
#bd {
padding : 100px;
margin-bottom : 1em;
text-align : left;
background-color : #FFFFFF;
}
</style>
</head>
<body>
<div id="doc">
<div id="shadowcontainer">
<div id="bd">
En masse tekst
</div>
</div>
</div>
</body>
</html>

/1.

Synes godt om

udvikler Nybegynder

25. oktober 2006 - 18:40 #4

Hjalp noget?

Synes godt om

mapoulsen Nybegynder

25. oktober 2006 - 20:22 #5

Du skal, som kvadratrodenaf1 også skriver, sørge for at elementet du ønsker en 100% højde, at dettes parent-element og dettes parent element også har en højde på 100%. Og det kan jeg se at du også har gjort. Dette har så bare ingen effekt når teksten alligevel tvinger en højde på over 100%.

Problemet med de 2 grå bokse, som ikke når til bunden, løser du på samme måde som det blev gjort i det tidligere indlæg du refererer til.

Synes godt om

svoeber Nybegynder

25. oktober 2006 - 20:43 #6

> kvadratrodenaf1
Dit eksempel løser problemet, hvis jeg blot havde en farve som baggrund til hhv. højre og venstre. Imidlertid er det to stykker grafik, som jeg gerne vil have i de to kolonner. Jeg havde udeladt dem i første omgang for at gøre eksemplet mere simpelt, men jeg har nu lagt dem tilbage i eksemplet igen, så I kan se problemet bedre.
Og som du skriver, kan jeg naturligvis løse problemet ved at bruge tabeller til layout. Det er bare ikke en vej, jeg har lyst til at gå, så jeg havde håbet på et alternativ i ren CSS. Men ellers tak for forslagene :)

> -aco-
Nej, det hjalp ikke med en tabel på 100% inde i min DIV - den vil kun spænde de 100% som DIV'en kan give af, ikke 100% af hele siden

> mapoulsen
Som sagt giver løsningen i det tidligere indlæg ikke mulighed for elasticitet i bredden, og derfor søger jeg en anden løsning.
Det er muligt, at den slet ikke findes, men jeg vil dog lige prøve alt af inden jeg giver op :)

Synes godt om

mapoulsen Nybegynder

25. oktober 2006 - 20:56 #7

Svoeber: Din løsning findes netop i et tidligere indlæg: http://www.eksperten.dk/spm/740241
Men jeg er ikke sikker på at vi snakker om det samme indlæg så. Det du ønsker er jo præcis det som jeg har lavet, og i det tidligere indlæg henviser til på http://www.tag-boliger.dk/

Synes godt om

svoeber Nybegynder

25. oktober 2006 - 21:17 #8

> mapoulsen
Nej, det er ikke helt samme problem. Hvis du prøver at forstørre/formindske teksten ved at holde ctrl nede samtidig med at du scroller (eller taster +/-), vil du se, hvad jeg mener.
Med din løsning er bredden altid den samme.

Synes godt om

Slettet bruger

25. oktober 2006 - 21:25 #9

Jeg mener stadig tables vil være det nemmeste.. Men dette virker også - Testet i FF og IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body, div {margin:0;padding:0;}

HTML, BODY {height: 100%;}
#left {
width : 57em;
background-image : url('http://www.cynope.com/bg-shadow-left.gif');
text-align : right;
background-repeat : repeat-y;
}
#right {
width : 60em;
background-image : url('http://www.cynope.com/bg-shadow-right.gif');
background-repeat : repeat-y;
text-align : left;
background-position : 100%;
}
#bd {
padding : 100px;
margin-bottom : 1em;
text-align : left;
}
</style>
</head>
<body>
<div id="left">
<div id="right">
<div id="bd">
Meget tekst
</div>
</div>
</div>
</body>
</html>

Synes godt om

mapoulsen Nybegynder

25. oktober 2006 - 21:47 #10

svoeber: Ah okey, den del havde jeg lige overset. Ja, så må løsningen være at lave 2 baggrunde i to div-elementer, en til højre og en venstre. Noget i stil med kvadratrodenaf1's forslag.

Synes godt om

svoeber Nybegynder

25. oktober 2006 - 22:04 #11

> kvadratrodenaf1
Jeps, det ser sørme ud til at være rigtigt godt derhen af. Selvfølgelig skal det gøres ved at få de to blokke med baggrunden til at indeholde blokken med indhold.
Læg bare et svar i tråden.

Dog er der stadig et lille problem, som jeg dog først får tid til at kigge rigtigt på i morgen: Højden skal stadig være 100%, hvis der ikke er indhold nok til at fylde det hele. Og det driller stadig lidt.
http://www.cynope.com/eksperten.html

> mapoulsen
Ja, det var lige netop det, der var forskellen :)
Ikke at det er supervigtig funktionalitet, men jeg synes nu det er meget lækkert. Fx yahoo.com har deres layout implementeret med fuld elasticitet.

Synes godt om

Slettet bruger

26. oktober 2006 - 09:55 #12

Det lader til at FF har et problem med block-elementerne. Se border på første eksempel i FF:

(har desuden et eksempel med table i bunden - mindre kode - større sandsynlighed for supportering i flere browsere da der ikke skal workarounds til - klart den bedste løsning efter min mening!!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body, div {margin:0;padding:0;}

HTML, BODY {height: 100%;}
#left {
width : 57em;
background-image : url('http://www.cynope.com/bg-shadow-left.gif');
text-align : right;
background-repeat : repeat-y;
border : 1px solid #000000;
height : 100%;
}
#right {
width : 60em;
background-image : url('http://www.cynope.com/bg-shadow-right.gif');
background-repeat : repeat-y;
text-align : left;
background-position : 100%;
border : 1px solid #AAAAAA;
height : 100%;
}
#bd {
padding : 100px;
text-align : left;
border : 1px solid #777777;
height : 100%;
margin-bottom : 1em;
}
</style>
</head>
<body>
<div id="left">
<div id="right">
<div id="bd">
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
Meget tekst<br>
</div>
</div>
</div>
</body>
</html>

Tables:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body, div {margin:0;padding:0;}

HTML, BODY {height: 100%;}
#main {
height : 100%;
width : 60em;
}
#left {
width : 4em;
background-image : url('http://www.cynope.com/bg-shadow-left.gif');
background-repeat : repeat-y;
}
#right {
width : 4em;
background-image : url('http://www.cynope.com/bg-shadow-right.gif');
background-repeat : repeat-y;
background-position : 100%;
}
#bd {
vertical-align: top;
width : 52em;
padding : 100px;
text-align : left;
}
</style>
</head>
<body>
<table id="main">
<tr>
<td id="left">
</td>
<td id="bd">
Meget tekst
</td>
<td id="right">
</td>
</tr>
</table>
</body>
</html>

Synes godt om

svoeber Nybegynder

26. oktober 2006 - 17:05 #13

> kvadratrodenaf1
Jeg er klar over, at table-løsningen er ganske simpel. Og nu har du efterhånden snakket så godt for den, at jeg da også er så godt som overtalt til at gå den vej :)
Det ser i hvert fald ikke ud til, at height-problemet i FF er lige til at løse.

Læg helst et svar for indsatsen.

Synes godt om

Slettet bruger

26. oktober 2006 - 17:35 #14

Jamen her er et svar.

/1.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS