6

左側にサイドバーがあり、すべてのコンテンツが右側にある単純な HTML ページがあります。メインコンテンツエリアには<iframe>. ただし、CSS を使用してフレームの高さを 100% に設定すると、何らかの理由で内容がオーバーフローするように見えdiv、コンテンツの後に少量の空白が生じます。

ここに私のHTMLコンテンツがあります:

<div id="container">
    <div id="sidebar">
        <p>Sidebar content</p>
    </div>
    <div id="content">
        <iframe id="contentFrame"></iframe>
    </div>
</div>

そして、ここに私のCSSがあります:

html, body {
    height: 100%;
}

#container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: grey;
}

#sidebar {
    width: 100px;
    float: left;
    background-color: blue;
    height: 100%;
}

#content {
    margin-left: 100px;
    height: 100%;
    background-color: yellow;
}

#contentFrame {       
    border: none;
    padding: 0;
    margin: 0;
    background-color: pink;
    height: 100%;
}

（注：誰かが尋ねる前に#container { position: absolute }、レイアウト上の理由から必要です。私はそれを変更できません。）

このフィドルで「動作」していることがわかります：http://jsfiddle.net/9q7yp/

目的は、ページの下部にある白い帯を取り除くことです (つまり、結果に垂直スクロール バーが表示されないようにする必要があります)。私が設定すればoverflow: hidden、#content問題はなくなります。必要に応じて喜んでこれを行いますが、これがないとうまくいかない理由を一生理解することはできません。誰でも理由を教えてもらえますか?

4

4 に答える 4

20

追加してみる

display:block;

にiframe。http://jsfiddle.net/9q7yp/14/

編集：

さて、より良い解決策があることがわかりました (実際に何が起こっているのかを理解する上でも):

追加

vertical-align:bottom;

にiframe#contentFrame。http://jsfiddle.net/9q7yp/17/

<iframe>、インライン要素として、初期値はvertical-align:baselineですが、height:100%インライン要素はベースラインを数ピクセル低く「プッシュ」します（最初はベースラインが下から数ピクセル高いため）、

そのため、親DIVは「コンテンツが 2 ピクセル低くなるので、その分のスペースを確保する必要がある」と考えています。

このフィドルでこの効果を確認できます (ブラウザ コンソールを確認し、両方のオブジェクトのbottomプロパティに注意してください)。ClientRect

于 2012-10-04T11:39:20.723 に答える
1

margin:0本文に追加

html, body {
    height: 100%;
  margin:0 auto; 
}

ワーキングデモ

于 2012-10-04T10:45:29.133 に答える
0

....................デモ

overflow:hidden;こんにちは、この ID の に渡します#content

このように

#content{
overflow:hidden;
}

ライブデモ

于 2012-10-04T10:48:22.147 に答える
0

セクションに追加margin: 0しますhtml, body {}。

于 2012-10-04T10:44:24.103 に答える