Just nu i M3-nätverket
Jump to content

Iframe och CSS


Cluster

Recommended Posts

Har en sida (a.htm) som har en iframe (b.htm).

Sida a skall ha en topBar som är 35px hög resten av sidan skall fyllas ut (height:100%) av iframen. Problemet är att det ju då totalt blir 100%+35px

Jag vill/kan/får inte använda script för att anpassa höjden utan lösningen måste vara pure css.

Har provat de flesta olika kombinationer men kommer aldrig ända fram.

 

a.htm[log]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>iFrame</title>
<style type="text/css" >
<!--
html, body {height:100%;width:100%;padding:0;margin:0;}

#topBar {
   height: 35px;
   width:100%;
   padding:0;
   margin:0;
   background-color:#CCC;
   }

#iFramePlaceHolder {
   min-height: 100%;
   _height: auto !important;
   height: 100%;
   padding:0;
   margin:0;
   }

.myIframe {
   width: 100%;
   min-height: 100%;
   _height: auto !important;
   height: 100%;
   padding:0;
   margin:0;
   border:none;
   }

-->
</style>
</head>

<body >
<div id="topBar">TOPBAR</div>
   <div id="iFramePlaceHolder">
       <iframe src="b.htm" class="myIframe" frameborder="0"></iframe>
   </div>
</body>
</html>

[/log]

 

b.htm[log]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>iFrame</title>
<style type="text/css" >
<!--
html, body {
   padding:0;
   margin:0;
   background-color:#99cc99;
   border:none;
   }
-->
</style>
</head>

<body>
   IFRAME BODY CONTENT
</body>
</html>

[/log]

 

Något ess som känner för att hjälpa till?

 

/Cluster

------------------------------------------------------------

Ditt vetande är värdelöst om inte andra vet att du vet

-----------> http://eforum.kicks-ass.net <------------

 

Link to comment
Share on other sites

Med följande får jag det att fungera i IE och med ngn pixels scroll på FF. Du kanske kan utgå från det och leka vidare:

[log]

#topBar {
position:absolute;
top:0px;
left:0px;
height: 35px;
width:100%;
padding:0;
margin:0;
background-color:#CCC;
}

#iFramePlaceHolder {
_top:30px;
_bottom:0px;
height:100%;
_height: auto !important;
padding:0;
margin:0;
}

.myIframe {
width: 100%;
min-height: 100%;
_height: auto !important;
height: 100%;
padding:0;
margin:0;
border:none;
}

[/log]

 

Link to comment
Share on other sites

Nja... Den översta delen av iframen (b.htm) döljs ju då av topBar.

 

(testar mot IE 7 och FF 2.0)

 

/Cluster

------------------------------------------------------------

Ditt vetande är värdelöst om inte andra vet att du vet

-----------> http://eforum.kicks-ass.net <------------

 

[inlägget ändrat 2006-11-14 15:25:12 av Cluster]

Link to comment
Share on other sites

Slarvade lite där med något. Men testa det här då:

[log]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>iFrame</title>
<style type="text/css" >
<!--
html, body {height:100%;width:100%;padding:0;margin:0;}

#topBar {
position:absolute;
top:0px;
left:0px;
height:35px;
width:100%;
padding:0;
margin:0;
background-color:#CCC;
}

#iFramePlaceHolder {
position:absolute;
_position:relative;
width:100%;
_width:auto;
top:35px;
left:0px;
bottom:5px;
padding:0;
margin:0;
}

.myIframe {
width: 100%;
min-height: 100%;
height: 100%;
padding:0;
margin:0;
border:none;
}

-->
</style>
</head>

<body >
<div id="topBar">TOPBAR</div>
<div id="iFramePlaceHolder">
<iframe src="b.htm" class="myIframe" frameborder="0"></iframe>
</div>
</body>
</html>

[/log]

 

Link to comment
Share on other sites

:thumbsup:

Dock så funkar det inte i IE7 (med strict doctype, vilket är ett krav)...

Några idéer?

 

/Cluster

------------------------------------------------------------

Ditt vetande är värdelöst om inte andra vet att du vet

-----------> http://eforum.kicks-ass.net <------------

 

[inlägget ändrat 2006-11-14 22:14:20 av Cluster]

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...