0

所以，我有一个页面，我让对象的宽度和高度达到 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>

CSS

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;
}
4

2 回答 2

0

尝试将您的 html 和内容标签高度设置为 100%：

html, #content {height:100%;}

小提琴 - http://jsfiddle.net/LUeZr/1/

请注意，由于底部栏占据 50 像素的高度，您的 iframe 会在页面中添加滚动条

于 2013-03-25T14:01:49.830 回答
0 
html{height: 100%;}
body{
    height: auto;
    min-height: 100%;
    position: relative;
}
#content {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
于 2013-03-25T14:16:58.157 回答