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

23/12

Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer

23/12

Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder

23/12

En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed

23/12

Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter

23/12

Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret

23/12

Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR

23/12

Vores vidensindsamling og demokratiske samtale påvirkes af helt lukkede beslutninger i en enkelt privat virksomhed

23/12

Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge

23/12

Banebrydende ChatGPT-opdatering er lige på trapperne: “Denne model vil være helt fantastisk til programmering”

23/12

Tivoli søger ny CIO: Kenneth Hartvig stopper efter tre år på posten

23/12

Vi ender med at bo i en taber-region, hvis ikke vi gør noget drastisk - her er digitaliseringsministerens plan

Vis flere artikler

IT-JOB

Capgemini Danmark A/S

SAP Engagement Manager

AURA A/S

IT-administrator

Center Denmark Fonden

Cloud Engineer

Paychex Europe

System Architect for leading SaaS company

Cognizant Technology Solutions Denmark ApS

Test Manager

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 16:03	Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
23/1214:43	html <Input.. Danske bogstaver Af pjotre i Andet software
23/1214:35	Brænde musik fra usb drev til cd Af Caso i Andet hardware
21/1222:16	Er "OneDrive" et "Must" ? Koster det penge ? Af Ikke-ekspert i Windows
21/1216:42	Windows Media Player - Hvilken version (Versioner) er gode til at afspille og kopiere ? Af Ikke-ekspert i Musik & videoafspillere