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

maze- Nybegynder

21. februar 2008 - 10:46 Der er 9 kommentarer og
1 løsning

Height 100% med div

Hej alle

Jeg har kigget en smule på de andre oplægomkring dette, men har ikke fundet noget der lige kan løse det umildbart.

Jeg har prøvet lidt med postion:absolute, men det fuckede det også op, ved så ikke om jeg brugte dem korrekt.

<!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 runat="server">
<title>Test</title>
</head>
<body style="background-color: #e5e5e5; margin: 0px; padding: 0px;">
<form id="form1" runat="server">
<center>
<div style="width: 1024px; text-align: left; background-color: White;">
<div style="float: left; width: 15px; background-image: url('../Images/fadeLeft.png');
background-repeat: repeat-y; height: 100%; position: inherit;">
</div>
<div style="float: left; width: 994px; height: 100px;">
</div>
<div style="float: left; width: 15px; background-image: url('../Images/fadeRight.png');
background-repeat: repeat-y; height: 100%; position: inherit;">
</div>
</div>
</center>
</form>
</body>
</html>

Det jeg gerne vil have er at de 2 div's med baggrund-images bliver lige så høje som den miderste div. Eller alternativt bare fylde hele højden på siden selvom man scroller.

Synes godt om

maze- Nybegynder

21. februar 2008 - 13:09 #1

Jeg har fundet ud af jeg gerne vil have de altid fylder hele sidens høje.

Hvis jeg gør den højre div postion:absolute, så er den korrekt. Men vis jeg så gør den venstre absolute, så gør der ged i den igen.

Synes godt om

sirius Nybegynder

21. februar 2008 - 13:44 #2

Jeg har brugt følgende kode med stor succes :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
</head>
<body style="margin:0px; padding:0px; background-color:#e5e5e5;">

<center>

<div style="width:1000px; height:100%;position:relative;">

<div style="background-color:blue; width:15px; height:100%;position:absolute;left:0px;background:url('fadeLeft.png');"></div>

<div style="background-color:white; width:970px; height:100%;position:absolute;left:15px;">
hejsa
</div>

<div style="background-color:blue; width:15px; height:100%;position:absolute;left:985px;background:url('fadeRight.png');"></div>

</div>

</center>

</body>

Synes godt om

olebole Juniormester

21. februar 2008 - 21:32 #3

<ole>

sirius >> Det ville da være komplet fjollet at bruge en kode, som har været forældet siden december 1997 - og som i Explorer 6 disabler de vigtigste dele af CSS

/mvh
</bole>

Synes godt om

wega Nybegynder

23. februar 2008 - 01:31 #4

Hej jeg sidder lige her med samme problematik. Er der nogen der har erfaring med height=100ex, eller i css | height: 100ex;

Wega

Synes godt om

wega Nybegynder

23. februar 2008 - 01:51 #5

Har du prøvet at sætte [padding-bottom: 0cm;]

Synes godt om

olebole Juniormester

23. februar 2008 - 15:09 #6

wega >> Læs, hvad jeg skrev: Den kode, sirius anbefaler, disabler enhver fornuftig brug af CSS i IE6+. Hele CSS's box-model er sat ud af kraft - og så kan det være stortset ligemeget, hvad man finder på.
Derudover må du aldrig bruge enheder i en HTML-attribut. Derfor vil height="100px" være ulovlig - og jeg går naturligvis udfra, du mente 'px' og ikke 'ex' :)

Løsningen er at skrive i en rimelig aktuel HTML-version - f.eks. HTML 4.01, som afløste HTML 3.2 i december 1997.

Dernæst skal man sørge for at bruge en fuld DTD med definitions-URL. Ellers disable'er man som sagt bl.a. CSS' box-model, som er noget af det vigtigste under CSS-standarden.

Sidst - men ikke mindst - skal dokument-elementet og body-elementet begge have deres højde sat til 100% - ligesom deres margin og padding skal sættes til 0 for ikke at introducere en lodret scrollbar.

Check dette dokument (med den DTD, sirius anbefaler) i FF og IE. Så kan du se, hvor vanvittigt IE fortolker koden. Det burde ikke være vanskeligt at se, det ikke er en god løsning:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: yellow;
}
div.withBorders {
border: 75px solid red;
}
</style>
</head>
<body>

<div>blabla</div>
<div class="withBorders">blabla</div>

</body>
</html>

Synes godt om

wega Nybegynder

23. februar 2008 - 22:03 #7

Hej olebole - Ja jeg er ny i gruppen, havde ikke set svaret var accepteret!

Min side er OK med disse styles + nogle externe css'er:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">

<style type="text/css"> * {margin: 0; padding: 0;} html, body {width: 100%; height: 100%; overflow: hidden;}
#header-Top {position: absolute; top: 0px; height: 71px; left: 0px; right: 29px;}
#header-Nav {position: absolute; top: 71px; height: 40px; left: 29px; right: 29 px;}
#body-div {position: absolute; top: 111px; bottom: 71px; left: 0; right: 0;}
#leftSide {position: absolute; top: 71px; bottom: 0px; left: 0; right: 0px; width: 29 px;}
#rightSide {position: absolute; top: 0px; bottom: 0px; left: auto; right: 0px; width: 29 px;}
#body-content-div {position: absolute; top: 0px; bottom: 0px; right: 29 px; left: 29 px; border: 1px solid #FFF; overflow-y:scroll; overflow-x:hidden;}
#footer-div {position: absolute; bottom: 0px; height: 71px; left: 0px; right: 0px;}
</style>

jeg har lige forsøgt at udskifte det med den DTD du foreslår:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Grrrr! - ikke så fedt et resultat... (mit indhold klaskede sammen til ca. 50 % af skærmbredden)

På min løsning ønsker jeg en scrollbar og den sidder nu der hvor den skal... Mit problem var at, jeg anvendte position: relative og ikke position: absolute til at få styr på mine div's, som skulle opfører sig som et 'old fashion' frameset. Og når man så side på en stor skærm var bunden lige så høj som resten.. Ellers tak for dit svar – det kunne jeg god ha’ bruge i går.
Ha' en god weekend!

Synes godt om

wega Nybegynder

23. februar 2008 - 22:09 #8

olebole >> vedr. 'ex' (fandt den på denne side.... under relative units designators)
http://msdn2.microsoft.com/en-us/library/ms530765(VS.85).aspx

Synes godt om

olebole Juniormester

23. februar 2008 - 23:06 #9

ex virker - i modsætning til em - ikke særlig ens på tværs af browsere. Derfor troede jeg, du mente px :)

Synes godt om

wega Nybegynder

24. februar 2008 - 01:12 #10

ja - det kom jeg også frem til, så den blev hurtigt kasseret :-)

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

22/11

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

Semler Gruppen

Change Manager til Semler Gruppen

Arbejdstilsynet

Senior Data Engineer, der vil gøre en forskel for fremtidens arbejdsmarked

Udviklings- og Forenklingsstyrelsen

Underdirektør med ansvar for it-drift af et stort it-program

IT & Co ApS

Systemkonsulent

Simteq A/S

Projektleder/Økonomikonsulent

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 15:56	Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
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