Gå til innhold

100% height i IE og FF


Anbefalte innlegg

Her er problemet:

-Jeg har en meny div til venstre, og en header og hoved div til høyre.

-Meny div'n skal dekka hele høyden på siden, og gjør også dette i IE og FF.

-MEN...når hoved div'n strekker seg lengre enn meny div'n i FireFox, så blir meny div'n aldri lengre enn 100% av browser vinduet.

...altså meny div'n stopper ved kanten, og når man scroller ned ser det utrolig dumt ut.

 

Jeg har søkt rundt omkring, og lett under hver stein for å finne løsningen, men må jeg virkelig ta til takke med tables for å få det til å funke?

 

Her er link til problemet.

Lenke til kommentar
Videoannonse
Annonse
Kan du ikke bare sette et repeterende bakgrunnsbilde på body, så slipper du unna alle 100%-verdiene.

 

Om jeg skjønte deg ritkig, that is.

 

Eventuelt har du et screenshot over hvordan det skal se ut?

Hvis du ser på kildekoden, så er litt av vitsen at jeg ikke skal bruke bilder.

Rammene rundt boksene på siden er lagd ene og alene av divs/css.

Poenget er at brukere skal kunne stille inn farger på alt via fargekoder.

 

Jeg er på sporet av noe nå takket være Marvil, så jeg legger ut link når det funker. Har funnet ut hvordan jeg gjør det, må bare få implementert det. :)

Jeg stiller bare bakgrunnsfargen på en container likt til menyen til venstre, så er saken biff. takk for rask hjelp :thumbup:

Lenke til kommentar

GUD! Hva i #¤¤& er alle de DIV'ene for noe? Når jeg scroller siden nedover i FF så går det SLOW MOTION.

 

Er det slik at de hjørnene på de boksene til høyre er laget med DIV's? I såfall er jeg uten tvil imot dette, hva er så galt med bilder? Jaja, nå er dette min mening og er klart ikke en del av topic i denne tråden, men jeg måtte bare få det ut.

Lenke til kommentar

Pokkern. Fant ikke løsninga, men var nærme... :)

Bilder:

ff med wrap container

ie med wrap container <-- sånn skal det se ut

ff uten wrap container

ie uten wrap container

 

Siden: test0.html

<html>
<head>
<title>Design</title>
<link rel="stylesheet" href="style0.css" type="text/css">
</head>
<body>
<div id="wrap">
<div id="left">
	Left<br>
	left<br>
	Left<br>
	left
</div>
<div id="right">
	<div id="top">
		Top
	</div>
	<div id="large_boxes">
		Large boxes<br>
		Large boxes
	</div>
	<div id="small_boxes">
		Small boxes
	</div>
</div>
</div>
</body>
</html>

 

CSS: style0.css

html,body {
margin: 0;
padding: 0;
height: 100%;
width: 780px;
background: #777777; /* outercolor */
border-color: black;
}

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
float: left;
width: 780px;
text-align: left;
background: blue;
color: white;
}

#left {
min-height: 100%;
height: auto !important;
height: 100%;
float: left;
width: 140px;
background: yellow;
color: white;
}

#right {
min-height: 100%;
height: auto !important;
height: 100%;
float: left;
width: 640px;
background: #777777; /* outercolor */
border-color: black;
}

#top {
float: left;
width: 640px;
color: white;
background: #444444; /* innercolor */
}

#large_boxes {
float: left;
width: 500px;
background: #777777; /* outercolor */
border-color: black;
}

#small_boxes {
width: 140px;
float: left;
height: 999px;
background: #777777; /* outercolor */
border-color: black;
}

 

Hvordan skal jeg få det til å fungere i begge browserene??

bugger ikke den ene, så bugger den andre, og motsatt. Har surra med det litt lenge nå... :cry:

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...