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

netro Nybegynder

22. december 2008 - 10:00 Der er 11 kommentarer

Celle med 100% højde

Følgende er en lidt amputeret udgave af mit layout, men det viser vist mit problem. Indholdet i den blå celle kan variere, og cellen tilpasser sig derfor i højden. Den gule tabel skulle gerne fylde hele højden, men det gør den ikke. Hvordan kan jeg løse det? Prøv evt. mit eks.

<!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" style="height:100%">
<head>
</head>

<body style="height:100%">
<table cellspacing="0" border="1" style="width:100%; height:100%">
<tr>
<td style="height:100%; background:red">
<table cellspacing="0" style="width:100%; height:100%; background:yellow" border="1">
<tr>
<td style="height:100%">
Højde: 100%
</td>
</tr>
</table>
</td>
<td style="height:100%; background:blue">
<div style="height:2500px">En masse indhold</div>
</td>
</tr>
</table>

</body>
</html>

Synes godt om

mireigi Novice

22. december 2008 - 10:28 #1

Mener ikke at height:100% er valid når vi snakker tables.

Du kan dog prøve at give din body en højde i "px", så resten af tabellerne ved hvad de skal tage "100%" af.

Synes godt om

netro Nybegynder

22. december 2008 - 10:35 #2

Jo, det virker bedre (bortset fra Opera), men indholdet kan slf. variere i højde, så jeg kan vel ikke bare give body en fast højde?

Synes godt om

mireigi Novice

22. december 2008 - 10:45 #3

Ikke hvis indholdet varierer i længde nej.
Prøv at fjerne "height:100%" fra din røde td.

Synes godt om

netro Nybegynder

22. december 2008 - 10:50 #4

Hvis jeg fjerner det, kollapser tabellen bare. Men hvad er alternativet så? For indholdet vil uundgåeligt variere i højde.

Synes godt om

mireigi Novice

22. december 2008 - 10:58 #5

Fjern den gule tabel. Hvis den alligevel kun har 1 celle der skal være 100% af cellen den (tabellen) er indkapslet i, er der ingen grund til at have tabellen der.

Synes godt om

netro Nybegynder

22. december 2008 - 11:09 #6

Det var det, jeg mente med "amputeret". Den gule tabel har i virkeligheden flere rækker/celler, der danner en baggrundsboks, som gerne skulle fylde hele højden.

Synes godt om

roenving Novice

22. december 2008 - 14:43 #7

Du mangler at give det yderste element en højde, såvidt jeg kan se:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>!00% højde</title>
<style type="text/css">
html,body{margin:0;padding:0;height:100%;}
.H100{height:100%;width:100%;border:1px solid black; border-collapse:collapse;}
.H100 td{height:100%;border:none;}
<style>
</head>

<body>
<table class="H100">
<tr>
<td style="background:red">
<table class="H100" style="background:yellow">
<tr>
<td>
Højde: 100%
</td>
</tr>
</table>
</td>
<td style="background:blue">
<div style="height:2500px">En masse indhold</div>
</td>
</tr>
</table>

</body>
</html>

-- og så vil du også kunne se problemerne med denne slags kodning, for det fremgår med al uønskelig tydelighed, at browserne fortolker det meget forskelligt, og det bliver nødvendigt at bruge forskellige stylesheets til IE og de andre browsere, som følger w3cs rekommendationer for fortolkning af højder !-)

Synes godt om

netro Nybegynder

22. december 2008 - 15:08 #8

Jeg kan ikke se nogen forskel, når jeg bruger dit eksempel.

Men måske er jeg også mere interesseret i at se en "anden slags kodning"?

Synes godt om

notes2c Nybegynder

22. december 2008 - 17:37 #9

Højden er beregnet ud fra dit omkransende element. I dit tilfælde har du defineret at html og body skal være 100%. Men du har defineret en div inde i en celle til at være 2500px men det ved dit body tag ikke noget om. Derfor får du denne opførsel, da det er mere end de 100%

Synes godt om

netro Nybegynder

14. januar 2009 - 22:42 #10

Det lyder meget logisk. I må gerne lægge svar.

Synes godt om

notes2c Nybegynder

15. januar 2009 - 17:16 #11

:-)

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