Question

所以，我有一个页面，我将对象的宽度和高度变为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;
}

Answer 1

尝试将html和内容标记的高度设为100％：

html, #content {height:100%;}

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

请注意，当你的底栏占据50px高度时，你的iframe会在你的页面上添加滚动条

Answer 2

html{height: 100%;}
body{
    height: auto;
    min-height: 100%;
    position: relative;
}
#content {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

除Chrome之外的所有内容都没有显示高度

2 个答案: