webForumDet fria alternativet
Logga in / Bli medlem

Hur få div-element att sträcka sig över hela fönstrets höjd?

HTML & CSS

12 svar · 1 040 visningar · startad av handtralala

handtralalaMedlem sedan jan. 200810 inlägg
Frågan#1

Jag håller på och layoutar http://designfirma.frac.dk men får inte det omslutande <div>-elementet "innehall" (dvs det med den grå bakgrunden) att sträcka sig ner till fönstrets botten. Dvs, jag vill att om man ökar storleken på webläsarfönstret vertikalt så ska den grå bakgrunden följa med och inte sluta mitt på som det blir nu. Helst ska även textraden längst ner med kontaktinfo etc följa med på motsvarande sätt.

Dessutom får jag inte loggan att hamna rätt i IE6, verkar funka i andra webläsare (Safari och Firefox). IE6 kanske inte hanterar float-attributet rätt?

Tips någon?

länk till css-fil: http://designfirma.frac.dk/stilmall.css

-edit- fick ordning på loggans position. dock verkar IE6 inte respektera storleken på teckensnitt (textraden med kontaktinfo längst nerska vara 8pt men får samma storlek som brödtexten, dvs 10pt).
-edit2- fixade teckensnittstorleken genom att ange ett teckensnitt som faktiskt finns på windows...

Okkidos avatarOkkidoMedlem sedan maj 20007 492 inlägg
#2

Flytta:
background:#666666 none repeat scroll 0% 50%;
width:600px;
i #innehall till body istället.

handtralalaMedlem sedan jan. 200810 inlägg
#3

Okkido skrev:

Flytta:
background:#666666 none repeat scroll 0% 50%;
width:600px;
i #innehall till body istället.

Fast jag vill ju behålla den mönstrade bakgrunden för att få marginaler. Jag vill alltså inte att det grå ska gå hela vägen ut åt sidorna på webläsarfönstret. Om jag gör som du föreslår blir ju hela sidan grå och det mittre, grå <div>-elementet sträcker sig ändå inte ner till fönstrets nederkant.

Att ändra bakgrunden till en bild i body-tagen funkar inte heller eftersom jag vill ha lika stora marginaler både på vänster och höger sida, oavsett bredd på webläsarfönstret.

-edit- Kan någon med IE6 testa om följande fungerar (php-funktion som ska fixa genomskinliga PNG:ar)? http://www.designfirma.frac.dk/test.php

Okkidos avatarOkkidoMedlem sedan maj 20007 492 inlägg
#4

Tänk dig att du flyttar ut allting ett steg. Flytta ut

background:#666;
border-left:1px solid black;
border-right:1px solid black;
margin:0pt auto;
width:600px;

till body.

Lägg din fina bakgrund i html istället för på body.

handtralalaMedlem sedan jan. 200810 inlägg
#5

Okkido skrev:

Tänk dig att du flyttar ut allting ett steg. Flytta ut

background:#666;
border-left:1px solid black;
border-right:1px solid black;
margin:0pt auto;
width:600px;

till body.

Lägg din fina bakgrund i html istället för på body.

Ah, jag är nog inte helt van vid att man kan sätta css attribut på _alla_ html-taggar... Ska testa detta! Tack :)

Okkidos avatarOkkidoMedlem sedan maj 20007 492 inlägg
#6

Dock med varierande resultat i ex. IE5.5

handtralalaMedlem sedan jan. 200810 inlägg
#7

Okkido skrev:

Dock med varierande resultat i ex. IE5.5

Jag får det inte att lira i Safari eller Firefox heller. Bakgrunden blir ju rätt om jag lägger den som ett attribut till html men själva innehåller fastnar ändå i överkant/vänster sida och sträcker sig fortfarande inte ner till fönstrets nedre kant. Eller menar du att jag ska ta bort #innehall helt och hållet?

Okkidos avatarOkkidoMedlem sedan maj 20007 492 inlägg
#8

Kan du inte visa?

jarvkloMedlem sedan juli 20013 378 inlägg
#9

handtralala skrev:

jag vill att om man ökar storleken på webläsarfönstret vertikalt så ska den grå bakgrunden följa med och inte sluta mitt på som det blir nu. Helst ska även textraden längst ner med kontaktinfo etc följa med på motsvarande sätt.

Hmm..

Två delproblem...

  1. Höjden på div:en
    Du har valt en <!DOCTYPE som ställer de webbläsare i det som kallas "Standards mode", det gör att höjden på body-elementet anses vara höjden på innehållet i bodyelementet 8dvs lika högt som din <div id="innehall"> i ditt fall...
    .
    Att din div inte "dras ut" om du sätter height:100% på den beror alltså på att body inte anses täcka hela webbläsarfönsterhöjden om den råkar vara högre än ditt innehåll.

Lösning (kokboksmetod) - lägg in följande efter din villkorliga kommentar i <head>

<style type="text/css">
	html,body {height:100%}
	#innehall {min-height:100%}
</style>
<!--[if lt IE 7.]>
  <style type="text/css">
	#innehall {height:100%}
  </style>
<![endif]-->

alternativt kan du meka in det i din ordinarie stilmallsfil - men glöm inte den villkorliga delen som är för IE6 och tidigare IE ;)

  1. För att flytta ner sidfotstexten får du rådda lite mer...
    Till att börja med kopierar du din sidfotsdiv *utanför* <div id="innehall"> och lägger in en tom div istället (principen framgår av kommentarerna i http://member.webforum.nu/2241/bottenfastsidfot-princip.html )
    Därefter flyttar du bakgrundsbilden till #innehall (ev. behöver du meka om den lite för att få med det gråa) - Principen framgår av hur bakgrundsbilden läggs in i containern i t.ex. http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html

Kokboksmetoder som sagt.

Lycka till :birp

handtralalaMedlem sedan jan. 200810 inlägg
#10

Okkido skrev:

Kan du inte visa?

Jo, självklart. Nedanstående är fel:
http://designfirma.frac.dk/test.html

Här är en jämförelse på hur jag gjort hittils och hur jag vill ha det:
http://designfirma.frac.dk/bilder/test.jpg

handtralalaMedlem sedan jan. 200810 inlägg
#11

jarvklo skrev:

Hmm..

Två delproblem...

  1. Höjden på div:en
    Du har valt en <!DOCTYPE som ställer de webbläsare i det som kallas "Standards mode", det gör att höjden på body-elementet anses vara höjden på innehållet i bodyelementet 8dvs lika högt som din <div id="innehall"> i ditt fall...
    .
    Att din div inte "dras ut" om du sätter height:100% på den beror alltså på att body inte anses täcka hela webbläsarfönsterhöjden om den råkar vara högre än ditt innehåll.

Lösning (kokboksmetod) - lägg in följande efter din villkorliga kommentar i <head>

<style type="text/css">
	html,body {height:100%}
	#innehall {min-height:100%}
</style>
<!--[if lt IE 7.]>
  <style type="text/css">
	#innehall {height:100%}
  </style>
<![endif]-->

alternativt kan du meka in det i din ordinarie stilmallsfil - men glöm inte den villkorliga delen som är för IE6 och tidigare IE ;)

  1. För att flytta ner sidfotstexten får du rådda lite mer...
    Till att börja med kopierar du din sidfotsdiv *utanför* <div id="innehall"> och lägger in en tom div istället (principen framgår av kommentarerna i http://member.webforum.nu/2241/bottenfastsidfot-princip.html )
    Därefter flyttar du bakgrundsbilden till #innehall (ev. behöver du meka om den lite för att få med det gråa) - Principen framgår av hur bakgrundsbilden läggs in i containern i t.ex. http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html

Kokboksmetoder som sagt.

Lycka till :birp

Tack! Ska klura på detta. Fan vad det är drygt att skriva validerbar kod ibland... :OO

handtralalaMedlem sedan jan. 200810 inlägg
#12

handtralala skrev:

Tack! Ska klura på detta. Fan vad det är drygt att skriva validerbar kod ibland... :OO

Yes!! Nu lirar det :) Stort tack, jarvklo!

handtralalaMedlem sedan jan. 200810 inlägg
#13

Kan någon med IE6 testa om sidan funkar? När jag testar på min flickväns dator så ignorerar den stilmallen helt och hållet men jag vet inte om det beror på hennes dator eller IE6 i sig. I IE7 (på en annan dator) funkar det som det ska.

257 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)