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

15:59

Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse

22/11

Vil købe tele-løsninger til det offentlige for 370 millioner kroner

22/11

Nørgaard: Det er de neuro-divergente originalers tid

22/11

Sker helt åbenlyst: Ansatte i den kinesiske stat sælger borgernes personlige data på hemmelige internet-fora

22/11

Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"

22/11

Derfor bliver den amerikanske tvangs-opdeling af Google nok ikke til noget

22/11

Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen

22/11

Vi har fundet 10 ledige it-stillinger, som du kan søge netop nu

22/11

Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet

22/11

Kombit gør klar til at købe it-konsulenter for 140 millioner kroner - her er planen

22/11

Droner i krig - sådan anvendes de mest effektivt på slagmarken

Vis flere artikler

IT-JOB

Region Midtjylland

Infrastrukturarkitekt til Digitalisering og It i Region Midtjylland

SDC A/S

Team Leader - AML (Regulatory & Financial Reporting)

Statens IT

Systemadministratorer til Endpoint Management i Statens It

KMD A/S

Senior Customer Success Project Lead

Politi

Senior udvikler med kompetencer inden for .NET og interesse for AI søges til Rigspolitiet

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 14:10	Outlook henter ikke mails Af TTA i Office & Kontorpakker
I dag 13:58	vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35	Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49	pop up black friday Af Malm i Virus
I går 18:31	Hvor finder jeg en netværksdriver? Af jcr18 i Wifi