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 に答える