那么，我有一个页面，我让对象的宽度和高度为100%，并填充容器。这对我来说很好，所以我就这么做了。然后我在firefox中浏览了这个页面，几乎喘不过气来。物体有完整的宽度，但高度被压扁了。我对如何在浏览器中修复这个问题感到困惑，除了chrome。下面是一些代码:
HTML<body>
<div id="content">
<div class="bottombar">
<a href="/" class="menu">1</a>
<a href="#" class="menu">2</a>
<a href="#" class="menu">3</a>
<a href="#" class="menu">4</a>
<a href="#" class="menu">5</a>
<a href="#" class="menu">Support</a>
<a href="#about" id="opener" class="menu">About</a>
</div>
<iframe height="100%" width="100%" src="http://www.google.com/" seamless></iframe>
</div>
</body>
p {
font-size: 30px;
}
h4 {
font-size: 50px;
}
body {
margin: 0px;
background-image: url('http://ptd.burngames.net/images/pattern-aosk.png');
background-repeat: repeat;
height:100%;
width:100%;
}
.bottombar {
width: 100%;
height: 50px;
background-image: url('http://ptd.burngames.net/images/menuback.png');
background-repeat:repeat-x;
font-size: 40px;
bottom: 0px;
left: 0px;
color: white;
}
.menu {
text-align: center;
padding-left: 25px;
font-family: 'Iceland', Arial;
color:white;
}
a:link {
text-decoration: none;
color:white;
}
a:visited {
text-decoration: none;
color:white;
}
a:active {
color:lightgray;
}
iframe {
height:100%;
width:100%;
}
embed {
height:100%;
width:100%;
background-image: url('images/trans.png')
background-repeat:repeat;
}
#news {
font-family: 'Iceland', Arial;
}
#news.h1 {
background-color:lightred;
}
试着给你的html和内容标签的高度100%:
html, #content {height:100%;}
提琴- http://jsfiddle.net/LUeZr/1/
请注意，当你有一个50px高度的底部栏时，你的iframe将会为你的页面添加滚动条
html{height: 100%;}
body{
height: auto;
min-height: 100%;
position: relative;
}
#content {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}