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

dorgbar Nybegynder

28. december 2004 - 15:54 Der er 5 kommentarer og
1 løsning

længde/højde angivet i % og px

jeg vil gere have at vide om det er muligt at angive en længde på et objekt i både pixels og % så man f.eks kan lave et tag
<tag style="Width: 100% -20px">
så tagget altså fylder hele skærmen udover 20 pixels.

Synes godt om

frol Nybegynder

29. december 2004 - 00:52 #1

Hvad med
width: 100%;
margin: 0 20px; ?

Synes godt om

roenving Novice

29. december 2004 - 12:34 #2

>>frol

-- ikke så god en ide, da elementet så vil have en bredde på 100% og så vil de margin komme udenpå, så ialt vil bredden blive 100% + 40px !-)

Men et lille trick kan klare den:

<div style="margin:20px 20px;">
<div style="background:green;">
Denne div er 100% bred - 40px
</div>
</div>

-- som det fremgår kan du ikke umiddelbart lave en ting, som er 100% høj, men så kan man tricke endnu mere:

<div style="position:relative;margin:0 20px;border:0px;height:100%;">
<div style="background:green;height:100%;z-index:1;">
<div style="height:20px;"></div>
Denne div er 100% bred - 40px og ser ud som om den er 100% - 40px høj
<div style="height:20px;"></div>
</div>
<div style="height:20px;position:absolute;top:0px;background:white;z-index:2;width:100%;"></div>
<div style="height:20px;position:absolute;bottom:-1px;background:white;z-index:2;width:100%;"></div>
</div>

(Kiggede ikke så meget på det, at jeg fandt ud af de -1px, men det er der nok en forklaring på !-)

-- det er i begge eksempler en forudsætning, at du har noget, som ligner dette med i dit stylesheet:

html,body{
margin:0;
padding:0;
border:0;
height:100%;
}

-- og en fuldt kvalificeret doctype inklusive dtd-link, så f.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Fuld højde simpelt</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/497362">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#banner{position:absolute;height:125px;width:100%;background:yellow;z-index:1;}
#top1{width:100%;height:50px;background:#770;}
#top2{width:100%;height:75px;background:#707;}
#main{height:100%;background:green;}
#spacer{height:125px;}
#bottom{position:absolute;bottom:0px;height:125px;width:100%;background:yellow;z-index:1;}
#bund1{width:100%;height:25px;background:#770;}
#bund2{width:100%;height:100px;background:#707;}
</style>
</head>
<body>
<div id="banner">
<div id="top1">top1</div>
<div id="top2">top2</div>
</div>
<div id="main">
<div id="spacer">Usynligt</div>
Hovedside</div>
<div id="bottom">
<div id="bund1">bund1</div>
<div id="bund2">bund2</div>
</div>
</body>
</html>

Synes godt om

dorgbar Nybegynder

29. december 2004 - 20:18 #3

tjaa ser ud til at virke fint, fik også lige nogle andre gode ting uyd af din kode :) height:100%; løste nogle andre problemmer jeg havde :D så bare opret svar

Synes godt om

frol Nybegynder

29. december 2004 - 22:57 #4

>>roenving
Jeez! den tænkte jeg ikke rigtigt igennem, hvad :-!

Flotte løsninger!
Den der -1px ting, ses "kun" i IE6, ikke i Gecko'erne...

Synes godt om

roenving Novice

30. december 2004 - 12:31 #5

Velbekomme '-)

Synes godt om

roenving Novice

16. maj 2005 - 16:42 #6

-- og tak for point ;~}

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
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	3	29/09/202410:58	20/03/202513:38

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

10:30

Nørgaard; Opskriften på at få store projekter til at lykkes...lad være!

21:05

AI-lab #2: Sådan får du fuld udnyttelse af Microsoft Office med nem programmering - og lær om super-prompts

18/04

Bliv it-driftsdirektør hos Metro Service eller bidrag til PET’s offensive operatinoer: Her er 10 ledige stillinger, som du kan søge i påsken

18/04

På uventet eventyr i det ydre rum: Ved en fejl bliver en dreng jordklodens repræsentant

17/04

Hvordan skaber vi en mere menneskevenlig digital fremtid? Få nogle bud her

17/04

Kritisk CVE-databasen om sikkerhed reddet i allersidste øjeblik - ny bevilling godkendt

16/04

Netcompany-stifterne André Rogaczewski og Claus Bo Jørgensen skovler penge ind: Har tjent næsten 600 millioner kroner på et år

16/04

Prøvekørt: Der er mange gode grunde til at kalde BMW i5 for den bedste el-stationcar til dato

16/04

Sådan modererer Mads og 20 andre danskere alt indhold på Metas danske platforme fra et center i Barcelona

16/04

Jeg købte tømmermands-pizza for alle mine bitcoins og gik glip af en formue: Nu overvejer jeg at gå all-in igen

16/04

Ny fond haste-etableret: Vil forsøge at redde sårbarhedsdatabasen CVE fra nedlukning

Vis flere artikler

IT-JOB

Banedanmark

Forandringsleder til IT-projekter i Banedanmarks IT-Udviklingssektion

Patent- og Varemærkestyrelsen

Projektleder

BEC

Program Director Document Lifecycle Mgmt.

Kinematic

Skarp fullstack-udvikler

MicroTech Software

Software- & AI-ingeniør – Skab Fremtidens AI-løsninger

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 16:53	Mac book pro fra 2019-2023 Af BRJ i Mac
I dag 16:25	Vedr. Mozilla Thunderbird email program Af Arne-Beck Christensen i E-mail programmer
I dag 16:18	"Jesus Chirst Superstar" - Original version på dansk. Af Ikke-ekspert i Fri debat
I dag 12:55	Fjern løsesymbol fra tænd/sluk Af arnel i Skærme
I dag 12:06	Gmail hvor mails ikke synkronisere Af made18 i E-mail programmer