Notifikationer

Markér alle som læst Log ud

Slettet bruger

01. september 2006 - 14:12 Der er 25 kommentarer og
1 løsning

height=100% med mere

Hej
hvordan laver jeg en tabel med tre rækker der har højde 100%(altså fylder hele siden op og ned) og den øverste række er 100px og den nederste 100px og den miderste variabel

Synes godt om

nielle Nybegynder

01. september 2006 - 15:10 #1

Et bud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Eksperten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html,body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<table style="height: 100%" border="1">
<tr style="height: 100px">
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr style="height: 100px">
<td>C</td>
</tr>
</table>
</body>
</html>

Synes godt om

old-faithful Praktikant

01. september 2006 - 15:27 #2

Helt generelt kan du bruge fremgangsmåden:

• Sæt selve TABELLENS højde til 100%, f.eks. sådan:
<table width="100%" style="height: 100%" border="0" cellspacing="0">

• Sæt derefter højden på de to celler/rækker med faste højder til 100 pixels

• Den sidste (variable) celle/række gør du intet ved.

---------
Husk desuden at:
• Tekstens længde kan påvirke højden
• Mellemrum, linjebrud osv. kan også have indvirkning på visningen.

Koden kan f.eks. se sådan ud:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%" >
<tr>
<td height="100"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="100"></td>
</tr>
</table>

// Old-Faithful™

Synes godt om

Slettet bruger

01. september 2006 - 15:37 #3

hvis jeg har denne doc i toppen virker det ik

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

hvis jeg sletter det sidste så der står

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
virker det

Synes godt om

Slettet bruger

01. september 2006 - 15:37 #4

ved i hvorfor??

Synes godt om

sw_red_6 Nybegynder

01. september 2006 - 15:42 #5

hvilken browser bruger du?

Synes godt om

jokkejensen Novice

01. september 2006 - 15:44 #6

ja det er fordi du kører i quirks mode, uden en reference til et dtd..

Synes godt om

Slettet bruger

01. september 2006 - 15:45 #7

eksplore....men hvad gør man hvis man vil lave ..det jeg vil lave (se sp)..uden at browseren går i QUIRKS-mode???

Synes godt om

jokkejensen Novice

01. september 2006 - 15:47 #8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Eksperten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html,body {
height: 100%;
margin: 0;
}
table#Main
{
bordeR:1px solid red;
border-collapse:collapse;
height: 100%;
}

#Main td
{
border:1px solid blue;
}
</style>
</head>
<body>
<table id="Main">
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
</body>
</html>

Synes godt om

Slettet bruger

01. september 2006 - 15:55 #9

ja men jeg vil have specifikke højde på A og C

Synes godt om

old-faithful Praktikant

01. september 2006 - 16:05 #10

Har du prøvet at gøre som jeg har skrevet?

Synes godt om

jokkejensen Novice

01. september 2006 - 16:06 #11

Den skal lige fin tunes lidt - men du fanger sikker nok ideen :)

Glemte det med A og C i den sidste - det er ikke muligt i en tabel uden quirksmode, eller javascript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Eksperten</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html,body {
height: 100%;
margin: 0;
}
div
{
border: 1px solid red; //remove for no scroll IE
}
#wrapper
{
width: 955px;
height: 100%;
margin: 0 auto;
}
.content
{

margin-top: 100px;

}
#Main
{
position:relative;
height:100%;
border: 1px solid blue;
}
.top, .bottom
{
height: 100px !important;
position:absolute;
width: 955px;

}
.bottom
{
bottom: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<div class="top">Top</div>
<div class="content">Content</div>
<div class="bottom">Bottom</div>
</div>
</div>
</body>
</html>

Synes godt om

mclemens Nybegynder

01. september 2006 - 16:38 #12

Kig evt. på denne også, hvis det nu skal
være muligt at køre over height 100% ... :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

.dhol{height:0px;position:relative;}
.dspc{height:100px;width:100%;}

#top{height:100px;position:absolute;background:#888;width:100%;}

#middle{height:100%;background:#aaa;}

body > #middle{height:auto;min-height:100%;}

#bottom{height:100px;position:absolute;top:-100px;background:#ccc;width:100%;}

</style>

</head>
<body>

<div class="dhol"><div id="top">
Top
</div></div>

<div id="middle"><div class="dspc"></div>
Middle start<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>Middle slut
<div class="dspc"></div></div>

<div class="dhol"><div id="bottom">
Bottom
</div></div>

</div></body></html>

Synes godt om

mclemens Nybegynder

01. september 2006 - 17:11 #13

</div></body></html>
rettes til </body></html>

Synes godt om

Slettet bruger

01. september 2006 - 21:56 #14

body > #middle{height:auto;min-height:100%;}
...er det normal css...har aldrig set den før ..kan du forklare hvad det gør

Synes godt om

mclemens Nybegynder

01. september 2006 - 22:21 #15

Når du sætter en ting til f.eks. height:100%; , så overholder Firefox den css definering - så hvis højden når op over de 100%, så følger baggrunden ikke med længere - og teksten ryger så ind igennem det andet element.

IE overholder derimod ikke en height:100%; og udvider så elementet i takt med, at der kommer mere indhold (((IE overholder det hvis man f.eks. samtidig kaster en overflow:hidden; ind sammen med højde angivelser - men vi ønsker (måske?) ikke at højden skal være fast )))

... Det vi så har brug for (forudsat at content skal være minimum 100%, men kunne udvide sig) er at elementet er 100% i højden og udvider sig - hvis behovet opstår ... Den normale css del for det ser sådan her ud: #middle{min-height:100%;} ... men da IE ikke understøtter css delen min-height - så er vi nød til først at give IE defineringen height:100%; og så sørge for at andre browsere får den ekstra definering med height til auto og minimums højden til 100% via. body > #middle selectoren (IE forstår ikke dette - så det er et css hack der p.t. er nødvendigt hvis elementet skal være 100% højt samtidig med at det skal kunne udvide sig ( medmindre man laver en javascript løsning istedet )) ...

Synes godt om

mclemens Nybegynder

01. september 2006 - 22:27 #16

... en søgning på
ie min-height
vil give en del links hvis du vil læse mere, men det er som sagt et css hack da man ellers ikke kan løse det optimalt ... alternativet er at lave css hacket med noget IE specifik kode begrænsning som ms selv foreslår:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

.dhol{height:0px;position:relative;}
.dspc{height:100px;width:100%;}

#top{height:100px;position:absolute;background:#888;width:100%;}

#middle{min-height:100%;background:#aaa;}

#bottom{height:100px;position:absolute;top:-100px;background:#ccc;width:100%;}

</style>

</head>
<body>

<div class="dhol"><div id="top">
Top
</div></div>

<div id="middle"><div class="dspc"></div>
Middle start<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>Middle slut
<div class="dspc"></div></div>

<div class="dhol"><div id="bottom">
Bottom
</div></div>

</div></body></html>

Synes godt om

Slettet bruger

01. september 2006 - 22:28 #17

damn...sikke en masse for så simpel en ting.

Skal jeg bruge div for at bruge din sidste løsning eller kan den også laves med tabeller?

Synes godt om

mclemens Nybegynder

01. september 2006 - 22:31 #18

( http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp ) Anbefaler den sidste med IE specifikt css del ...

Synes godt om

Slettet bruger

01. september 2006 - 22:40 #19

#bottom{height:100px;position:absolute;top:-100px;background:#ccc;width:100%;}

hvordan kan det være den kommer nederst når den står til top?

Synes godt om

mclemens Nybegynder

01. september 2006 - 22:42 #20

[ damn...sikke en masse for så simpel en ting. ]
Enig, det er desværre IE der ikke understøtter nok css til at håndtere det ... man kunne også lave det kortere - men det vil gøre enten:

a) At den bund div ikke vil nå ned til bunden
(tilfældet hvis de to andre elementer lægges samlet i samme element)

b) At der konstant vil være en scroller på siden - selvom det er unødvendigt
(tilfældet hvis elementerne bliver fjernet af den specielle relative div)

[ Skal jeg bruge div for at bruge din sidste løsning eller kan den også laves med tabeller? ] Ja, det kan ikke gøres med tabeller - tabeller duer ikke optimalt ... eksempel på konverteringen (se firefox):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

.dhol{width:100%;height:0px;position:relative;border-collapse:collapse;}
.dhol td{padding:0px;}
.dspc{height:100px;width:100%;}

#top{height:100px;position:absolute;background:#888;width:100%;border-collapse:collapse;}
#top td{padding:0px;vertical-align:top;}

#middle{width:100%;min-height:100%;background:#aaa;border-collapse:collapse;}
#middle td{padding:0px;vertical-align:top;}

#bottom{height:100px;position:absolute;top:-100px;background:#ccc;width:100%;border-collapse:collapse;}
#bottom td{padding:0px;vertical-align:top;}

</style>

</head>
<body>

<table class="dhol"><tr><td><table id="top"><tr><td>
Top
</td></tr></table></td></tr></table>

<table id="middle"><tr><td><table class="dspc"><tr><td></td></tr></table>
Middle start<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>Middle slut
<table class="dspc"><tr><td></td></tr></table></td></tr></table>

<table class="dhol"><tr><td><table id="bottom"><tr><td>
Bottom
</td></tr></table></td></tr></table>

</body></html>

Synes godt om

mclemens Nybegynder

01. september 2006 - 22:44 #21

[ hvordan kan det være den kommer nederst når den står til top? ]
Fordi den er lagt ind i en relative div <div class="dhol"> og dhol
har en højde på 0px så der ikke kommer en vertical overflow - og derfor
en negativ højde definering så den hopper baglæns op på siden ...

Det er ikke simpelt, men der er ikke en simpel løsning på dit problem
- jeg har rodet meget med dette problem i flere tråde ... :/

Synes godt om

Slettet bruger

01. september 2006 - 22:48 #22

mange tak

...Jeg har ellers ungået lidt at lave div og brugt tabeller men nu er der vist ingen vej uden om at sætte sig lidt ind i dem.

Jeg synes det er en god løsning du er kommet med og må meget gerne lægge et svar

Synes godt om

mclemens Nybegynder

01. september 2006 - 22:54 #23

Hvis det _skal_ være med så mange tabeller som muligt kan du måske rode med denne her ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

.dhol{width:100%;height:0px;position:relative;border-collapse:collapse;}
.dhol td{padding:0px;}
.dspc{height:100px;width:100%;}

#top{height:100px;position:absolute;background:#888;width:100%;border-collapse:collapse;}
#top td{padding:0px;vertical-align:top;}

#middle{width:100%;min-height:100%;background:#aaa;border-collapse:collapse;}
#middle td{padding:0px;vertical-align:top;}

#bottom{height:100px;position:absolute;top:-100px;background:#ccc;width:100%;border-collapse:collapse;}
#bottom td{padding:0px;vertical-align:top;}

</style>

</head>
<body>

<div class="dhol"><div id="top"><table><tr><td>
Top
</td></tr></table></div></div>

<div id="middle"><table><tr><td><table class="dspc"><tr><td></td></tr></table>
Middle start<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>middle ...<br>Middle slut
<table class="dspc"><tr><td></td></tr></table></td></tr></table></div>

<div class="dhol"><div id="bottom"><table><tr><td>
Bottom
</td></tr></table></div></div>

</body></html>

... Ved ikke om tabellerne er up-2-date, det kan godt ske at <tbody> og </tbody> skal tilføjer ? (droppede tabeller i midten af sidste år efter 5 år's legen med spacer elementer og colspan og rowspan mareridt ... og hoppede på css og div vognen ... Generalt vælger jeg selv et element afhængig af behovet, og i visse tilfælde er tabeller bedre end div's og i andre tilfælde modsat ... dette er et af tilfældene ...

Synes godt om

mclemens Nybegynder

01. september 2006 - 22:57 #24

(... der er et par css ting der skal fjernes i ovenstående
... forsøgte for meget på at lave det til tabeller...)

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}

.dhol{width:100%;height:0px;position:relative;}
.dspc{height:100px;width:100%;}

#top{height:100px;position:absolute;background:#888;width:100%;}

#middle{width:100%;min-height:100%;background:#aaa;}

#bottom{height:100px;position:absolute;top:-100px;background:#ccc;width:100%;}

</style>

Synes godt om

Slettet bruger

01. september 2006 - 22:57 #25

takker for hjælpen... :-)

Synes godt om

mclemens Nybegynder

01. september 2006 - 22:57 #26

Velbekom, 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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
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

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