webForumDet fria alternativet
Logga in / Bli medlem

Div som är 100%

HTML & CSSur HTML, XHTML & CSS

21 svar · 597 visningar · startad av Addeladde

AddeladdeMedlem sedan jan. 20013 406 inlägg
Frågan#1

Hej

Jag vill ha två divar där den första diven är 100% i bredd och 24 pixlar i höjd. Den undre diven ska sedan vara 100% i bredd och sedan 100% av det som är kvar av sidan. Hur gör jag detta så det fungerar i både Firefox och Internet Explorer 6.0?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link href="stilar.css" rel="stylesheet" type="text/css">
<style>
#fileMenu { 
  float: left;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #D6D6D6;
  width: 100%;
  height: 24px;
  font-size: 10px;
  font-family: Tahoma, Arial, Verdana;
  vertical-align: middle;
}
.pageWindow { 
  float: left;
  background-color: #D6D6D6;
  width: 100%;
  height: 24px;
  font-size: 10px;
  font-family: Tahoma, Arial, Verdana;
  vertical-align: middle;
}
#windows{
  width: 100%;
  min-height:100%;
  height: 100%;
  background-color: #FFBB33;
}
</style>
</head>
<body>
<div id="fileMenu">Arkiv</div>
<div id="windows">fönster</div>
</body>
</html>

Detta fungerar inte

InsiderMedlem sedan jan. 2000978 inlägg
#2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Test</title>
  <style type="text/css">
    * {margin:0;padding:0;}
    html, body {height:100%;}
    #wrap {
    	min-height:100%;
    	background:#eda;
    }
    * html #wrap {
    	height:100%;
    }
    #top {
    	height:24px;
    	background:#eee;
    }
  </style>
  </head>
  <body>
    <div id="wrap">
      <div id="top">
        <p>24 pixlar hög.</p>
      </div>
      <p>Resten av fönstrets höjd.</p>
    </div>
  </body>
</html>
AddeladdeMedlem sedan jan. 20013 406 inlägg
#3

<p>Resten av fönstrets höjd.</p>
Fast där detta står vill jag ha ett lager som är resten av fönstret höjd som jag kan jobba med

icaaqMedlem sedan okt. 20005 273 inlägg
#4
[red]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Test</title>
  <style type="text/css">
    * {margin:0;padding:0;}
    html, body {height:100%;}
    #wrap {
    	min-height:100%;
    	background:#eda;
    }
    * html #wrap {
    	height:100%;
    }
    #top {
    	height:24px;
    	background:#eee;
    }
  </style>
  </head>
  <body>
    <div id="wrap">
      <div id="top">
        <p>24 pixlar hög.</p>
      </div>
      [b]<div>[/b]<p>Resten av fönstrets höjd.</p>[b]</div>[/b]
    </div>
  </body>
</html>[/red]

Eller ;)

mv icaaq

jarvkloMedlem sedan juli 20013 378 inlägg
#5

Addeladde skrev:

<p>Resten av fönstrets höjd.</p>
Fast där detta står vill jag ha ett lager som är resten av fönstret höjd som jag kan jobba med

Definiera vad du egentligen menar med "lager" (finns ett antal olika aspekter man kan lägga på "lager" :) ) - dvs vad är det egentligen du vill kunna göra i "nedre delen" som inte funkar om du lägger "övre delen" först i den ? (behöver mer info för att kunna komma med mer konkreta förslag :) )

AddeladdeMedlem sedan jan. 20013 406 inlägg
#6

jarvklo skrev:

Addeladde skrev:

<p>Resten av fönstrets höjd.</p>
Fast där detta står vill jag ha ett lager som är resten av fönstret höjd som jag kan jobba med

Definiera vad du egentligen menar med "lager" (finns ett antal olika aspekter man kan lägga på "lager" :) ) - dvs vad är det egentligen du vill kunna göra i "nedre delen" som inte funkar om du lägger "övre delen" först i den ? (behöver mer info för att kunna komma med mer konkreta förslag :) )

Jag jobbar med innerHTML i båda lagren och lägger till och tar bort information. Jag använder detta till en webbaplikation.

AddeladdeMedlem sedan jan. 20013 406 inlägg
#7

Insider skrev:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Test</title>
  <style type="text/css">
    * {margin:0;padding:0;}
    html, body {height:100%;}
    #wrap {
    	min-height:100%;
    	background:#eda;
    }
    * html #wrap {
    	height:100%;
    }
    #top {
    	height:24px;
    	background:#eee;
    }
  </style>
  </head>
  <body>
    <div id="wrap">
      <div id="top">
        <p>24 pixlar hög.</p>
      </div>
      <p>Resten av fönstrets höjd.</p>
    </div>
  </body>
</html>

Nope fungerar inte som jag vill. Behöver ha de två lagren avskila från varandra.

zcorpanMedlem sedan dec. 20042 245 inlägg
#8
    <div id="wrap">
      <div id="top">
        <p [b]id="fileMenu"[/b]>24 pixlar hög.</p>
      </div>
      <p [b]id="windows"[/b]>Resten av fönstrets höjd.</p>
    </div>
AddeladdeMedlem sedan jan. 20013 406 inlägg
#9

zcorpan skrev:

    <div id="wrap">
      <div id="top">
        <p [b]id="fileMenu"[/b]>24 pixlar hög.</p>
      </div>
      <p [b]id="windows"[/b]>Resten av fönstrets höjd.</p>
    </div>

Innanför p taggen behöver jag kunna sätta ett objekt som är 100%

jarvkloMedlem sedan juli 20013 378 inlägg
#10

Hmmm...

Innanför p taggen behöver jag kunna sätta ett objekt som är 100%

... det ändrar förutsättningarna något...

Det finns olika approacher man kan tänka sig här, alla med mer eller mindre seriösa nackdelar/begränsningar på olika sätt...
Vill du "bara" kunna garantera att en bakgrundsbild eller en bakgrundsfärg täcker hela "den undre" ytan, eller behöver du t.ex. kunna skala om en <iframe>, <img> eller en flashfilm så att den täcker hela ytan ?

Hur "komplex" kommer koden i "den undre diven" (ref: din ursprungskod) att vara ?

Hur skall "den undre" bete sig om innehållet i den "svämmar över" nedåt ?

AddeladdeMedlem sedan jan. 20013 406 inlägg
#11

En sak som jag upptäckt är att om jag i ursprungskoden som jag postat här ovan tar bort det fetmarkerade så fungerar den.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   [b]"http://www.w3.org/TR/html4/strict.dtd"[/b]>

jarvklo skrev:

... det ändrar förutsättningarna något...

Det finns olika approacher man kan tänka sig här, alla med mer eller mindre seriösa nackdelar/begränsningar på olika sätt...
Vill du "bara" kunna garantera att en bakgrundsbild eller en bakgrundsfärg täcker hela "den undre" ytan, eller behöver du t.ex. kunna skala om en <iframe>, <img> eller en flashfilm så att den täcker hela ytan ?

Hur "komplex" kommer koden i "den undre diven" (ref: din ursprungskod) att vara ?

Hur skall "den undre" bete sig om innehållet i den "svämmar över" nedåt ?

I lagret ska det finnas en iframe som täcker hela ytan.
Innehållet får helt enkelt inte svämma över.

jarvkloMedlem sedan juli 20013 378 inlägg
#12

En sak som jag upptäckt är att om jag i ursprungskoden som jag postat här ovan tar bort det fetmarkerade så fungerar den.

Perfekt!
Om "Quirks mode" ("bakåtkompatibelt visningsläge") löser problemet för dig så är det bara att gratulera :birp - För det är det som händer när du "kapar" just den där <!DOCTYPE-deklarationen... Du byter från "standards mode" till "Quirks" - iallafall i "alla vanliga" webbläsare :bire

zcorpanMedlem sedan dec. 20042 245 inlägg
#13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

...ger standards mode för mig. Du menar inte:

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

...?

jarvkloMedlem sedan juli 20013 378 inlägg
#14

Jovisst gör jag det.
Jag menade helt klart att

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

minus "den fetmarkerade delen" addeladde pratar om - dvs URL:en till DTD-filen - blir

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

Och i det läget stämmer det jag skrev.
Ledsen om jag förvirrade begreppen :bire

CalevanMedlem sedan maj 20031 173 inlägg
#15

Hur blev altså den slutliga koden som fungerar? jag försöker pussla ihop något med informationen här i tråden, men lyckas inte helt. vill precis som du ha en iframe i den undre som ska vara 100% hög.

tack!

AddeladdeMedlem sedan jan. 20013 406 inlägg
#16

Ändra doctype till

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

och kör på ursprungskoden.

CalevanMedlem sedan maj 20031 173 inlägg
#17

Den koden du postat högst upp altså? för du sa lite senare att det fungerade om du tog bort

"http://www.w3.org/TR/html4/strict.dtd">

men någon sådan rad har du ju inte i det första inlägget, så jag blev lite förvirrad.

sen förstod jag det som om du ville kunna skapa en iframe med 100% höjd i diven som heter id="windows", men det fungerar inte för mig, dvs om jag skriver:

<div id="windows"><iframe frameborder="2" width="100%" height="100%" src="" name="body"></iframe></div>

så är iframen 24 pixlar för stor och går under skärmkanten, eller har du lyckats lösa detta?

tack!

AddeladdeMedlem sedan jan. 20013 406 inlägg
#18

Detta fungerar för mig i alla fall:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style>
body {
	margin: 0px;
	height: 100%;
	overflow:auto;
}

#container {
   min-height:100%;
}
* html #container { /*ignoreras av FF */
   height:100%;
}

#fileMenu { 
  background-color: #DBD8D1;
  width: 100%;
  height: 24px;
  font-size: 11px;
  font-family: Tahoma, Arial, Verdana;
  vertical-align: middle;
}
.pageWindow { 
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-family: Tahoma, Arial, Verdana;
  vertical-align: middle;
}
#windows{
  width: 100%;
  min-height:100%;
  height: 100%;
}
</style>
</head>
<body>
<div id="windows">
<div id="fileMenu">
<div style="float: left; width:37px; height:23px;">&nbsp;</div>
</div>
</div>
<div id="dropArchive" style="position:absolute; display:none; z-index:1; top: 24px; left: 5px; width: 160px; background-Color: #DBD8D1; padding: 1px; border:1px solid #666666;" unselectable="on">
<!-- Här har jag min iframe-->
</div>
</body>
</html>
CalevanMedlem sedan maj 20031 173 inlägg
#19

id container används inte och id dropArchive är inte definierat, kanske det som är hemligheten?

sidan blir så här för mig: .
det är lite svårt att se men om man tar bort alla style egenskaper på diven som har id dropArchive så ser man att iframen ligger en skärm neråt .

så, jag frågar igen, är du säker på att detta är den koden du har fått att fungera?

tack!

AddeladdeMedlem sedan jan. 20013 406 inlägg
#20

droparchive kan du ta bort och det där är koden som jag fått att fungera

145 ms totalt · 3 externa anrop · v20260731065814-full.4bcf49fe
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
141 ms — hämta tråd, inlägg och bilagor (db)