webForumDet fria alternativet

Hela höjden oavsett upplösning

HTML & CSS

17 svar · 482 visningar · startad av ade

Medlem sedan juli 20041 081 inlägg
Frågan#1

Har kommit till detta igen och jag lär mej aldrig hur man gör det.

Jag har byggt en sida med en det tabeller, nu vill jag ha sidan att sidan ska täcka hela höjden, utan scroll. Jarvklo brukar hjälpa mig och är duktig på sånt här.

<table width="703" border="0" cellpadding="0" cellspacing="0">
  
  <tr> 
    <td width="26" rowspan="6" valign="top" background="leftshadow.gif"></td>
    <td height="110" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="650" height="110" bgcolor="#FFFFFF"></td>
        </tr>
      </table></td>
    <td width="27" rowspan="6" valign="top" background="rightshadow.gif"></td>
  </tr>
  <tr> 
    <td width="130" height="46" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="130" height="46" background="menu.gif"></td>
        </tr>
      </table></td>
    <td width="130" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        
        <tr> 
          <td width="130" height="46" background="menu.gif"></td>
        </tr>
      </table></td>
    <td width="130" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="130" height="46" background="menu.gif"></td>
        </tr>
      </table></td>
    <td width="130" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="130" height="46" background="menu.gif"></td>
        </tr>
      </table></td>
    <td width="130" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        
        <tr> 
          <td width="130" height="46" background="menu_right.gif"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="19" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="650" height="19" background="under.gif" bgcolor="#FFFFFF"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="226" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="650" height="226" bgcolor="#FFFFFF"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="212" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="650" height="212" bgcolor="#FFFFFF"></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="27" colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
       
        <tr> 
          <td width="650" height="27" bgcolor="#FFFFFF">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>

Ändra gärna denna kod och berätta vad ni gjort för att få den 100% oavsett upplösningen.

tack på förhand!

Medlem sedan juli 20013 378 inlägg
#2

Hmm..

Standardlösning:

  1. lägg till
style="height:100%"

i din yttersta <table>

2)lägg till

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

i din stilmall

Medlem sedan juli 20041 081 inlägg
#3

2an har jag redan, yttersa, men du den längst till höger då?

Medlem sedan juli 20013 378 inlägg
#4

Den delen av tabellen blir också 100% hög om du kör med style="height:100%" på den table som "startas först" i koden (dvs "den yttersta" ;) )

Hur det hela ser ut med dina bilder inlagda (som jag inte har tillgång till) är en helt annan femma däremot ... Men man kan inte hjälpa dig med det utan bilderna ;)

Har du en länk till sidan så att det är lättare att se vad du egentligen siktar på ?

Medlem sedan juli 20041 081 inlägg
Medlem sedan juli 20013 378 inlägg
#6

Testa

<table width="703" border="0" cellpadding="0" cellspacing="0" style="height:100%">

som sagt ;)

Medlem sedan juli 20041 081 inlägg
#7

Okej.

Medlem sedan juli 20041 081 inlägg
#8

Så här vart det nu, jag ökade längden också.

http://www.carcentrum.se/design5

Fick byta adress för ftpn krånglar.

Medlem sedan jan. 2000978 inlägg
#9

Nej, du har skrivit fel:

style="[b]height:[/b]100%"
Medlem sedan juli 20041 081 inlägg
#10

Ändrade nu men vart ingen skillnad :(

Edit: så här står det i stilmallen.

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

Den är det väl inget fel på?!

har uppdaterat

http://www.carcentrum.se/design5

Medlem sedan jan. 2000978 inlägg
#11

Nu funkar det ju med 100% höjd för tabellen.
Men du kan inte ha fasta höjdvärden på alla elementen inuti tabellen. Bara på de som har med designen att göra.

Medlem sedan juli 20041 081 inlägg
#12

Men jag har ju haft det förut, att sidan är från topp till bott utan scroll och oavsett upplösning. Det hjälpte jarvklo mej med. Så det ska väl fungera här också!

Medlem sedan jan. 2000978 inlägg
#13

Men om innehållet är högre än 100% så måste man ju få en scroll. Eller hur?
Just nu har du satt höjden på en <td> till 816

Medlem sedan juli 20041 081 inlägg
#14

Sök på hela höjden oavsett upplösning så hittar du en tråd där jarvklo löste ett sådant problem åt mej.

Så är det gjort på exempelvis https://www.mdsolutions.se

Men, jag som har dubbel så högt aktivitetsfält får scrolla lite på den sidan, men ingen scroll på min gammla sida som jarvklo hjälpte mej med.

Medlem sedan juli 20013 378 inlägg
#15

Hmm
Verkar som om du har gått på en ganska vanlig mina, nämligen den att en tabell börjar "justera" radhöjder (och kolumnbredder) när man "överspecificerar" måtten (och ibland utan att man gör det också pga "konstigt" innehåll - men det är en annan historia ;) )

Med "överspecificering" menas att man specificerar precis allt, men gör det på ett sätt som inte kan uppfyllas. Exempel:

<table width="400" border="1">
  <tr>
    <td width="100">100</td>
    <td width="200">200</td>
  </tr>
</table>

Den här tabellens yttermått skall alltså vara 400 pixlar på bredden, men kolumnernas sammanlagda bredd blir 300 pixlar...
Hur förväntas tabellen egentligen bete sig ?
Skall sammanlagda bredden minskas till 300 eller skall kolumnerna breddas så att deras summa blir 400 pixlar ?
Om så - i så fall skall bägge kolumnerna "breddas" för att bibehålla proportionerna, eller skall "så få som möjligt" anpassas för att inte störa innehållet ?

Svaret på de (retoriska :e ) frågorna finns naturligtvis nånstans i W3C:s specar, men man kan snabbt konstatera att hanteringen skiljer sig lite mellan webbläsarna (även om mycket naturligtvis fungerar på samma sätt i de flesta)

Ett annat exempel förresten:

<table width="400" border="1">
  <tr>
    <td width="10%">denhärskallvaratioprocentbred</td>
    <td width="200">200</td>
  </tr>
</table>

Så - dina höjdangivelser skapar en överspecificerad tabell när du sätter höjden till 100% och höjden av webbläsarfönstret överstiger summan av tabellradernas angivna höjder - och då börjar alltså radernas respektive höjder att justeras av webbläsaren så att summan av de modifierade höjderna skall uppfylla tabellens verkliga höjd - med "glipor" mellan bilderna som följd.

Lösning:
Tänk om lite nu när du känner till problemet och lägg tabellerna ungefär såhär istället:

<table id="yttre" style="height:100%" border="1"> 
  <tr valign="top">
    <td>
     <table id="header-och-meny-med-fast-hojd" border="1" width="100%">
       <tr><td style="height:100px">Header med fast höjd</td></tr>
       <tr><td style="height:100px">[ny tabell med 100% bredd och fast höjd som innehåller menyn]</td></tr>
     </table>
     <div> Innehållet</div>
    </td>
   </tr>
   <tr valign="bottom"><td>[sidfot, eller en tabell med fast höjd och 100% bredd med  sidfoten i ]</td></tr>
</table>

Så länge du har samma bakgrundsfärg/bild i "ytter"-tabellens celler och i innehållet ger detta det du vill ha... För det spelar då ingen roll hur stora de två raderna i yttertabellen blir på höjden iom att den ena justerar innehållet "mot toppen" och den andra "mot botten"

I takt med att innehållet sedan växer på höjden, kommer cellerna att fyllas och problemet att försvinna - resten av tricket består i att klura ut hur du skall beskära dina bakgrundsbilder för den "nya" strukturen - men det tror jag du fixar utan problem ;)

:birp

/red: förtydligade exemplet

Medlem sedan juli 20041 081 inlägg
#16

Jag körde height:100% på tabellen den tabellen som är under menyn nu, men jag förstår inte riktigt alt du skriver pga av mina kunskaper i html är begränsade.

Skulle vara bra om du kunde visa ett lite mer specifikt exempel.

Så här ser det ut nu:

https://www.carcentrum.se/design5

Medlem sedan juli 20013 378 inlägg
#17

Mer specifikt exempel för hur DirektDesigns webbsidesexempel för Birka Logistik AB skulle kunna kodas bifogas...

Principen:

En huvudtabell med två rader

På övre raden lägger en tabellcell som innehåller två saker:
* En tabell med header och meny som har fast höjd
* och under den en <div> med sidinnehållet

På undre raden lägger du en tabell med sidfoten.

valign="top" på övre raden
valign="bottom" på undre raden

Det enda (förutom dina designbilder) du behöver peta in är förmodligen

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

- men det har du ju koll på numera ;)

:birp

Medlem sedan juli 20041 081 inlägg
#18

Tack, men jag löste det innan med den där koden som du hjälpte mej med förrut. Du är en hjälte ;)

258 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)
120 ms — ändringar (db)