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
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
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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