0

これに関するほとんどの投稿を調べましたが、何も役に立ちませんでした。

ウィンドウの長さに収まり、子 divdivにも適用できるように、高さを100%に増やす必要があります。

#container{
    width: 75%; 
    background-color: silver; 
    background-position: center;
    min-height: 100px;
    overflow : hidden;
    margin: 0 auto;
}

#header{
    background-color:infotext;
}

h1{
    margin-bottom: 0; 
    color: white;
}

#list{
    width: 20%; 
    background-color:window; 
    float: left;
    height:100%;
}
#links{
    width: 55%;
}

コード：

<body>
    <div id="container">
        <div id="header">
            <h1 align="center">Represent</h1>
        </div>
        <div id="list">
            <span><h4>Fruits</h4></span>
            <hr>
            <p>Apple</p><br>
            <p>Mango</p><br>
            <p>Orange</p>
        </div >
        <div id="links">
        <iframe src="http://www.google.co.in" frameborder="0">
        </iframe>
        </div>
    </div>
</body>

問題は、サイズが大きくても、container divおよび残りの部分がdivs拡張されず、表示されることです。解決策はありますか？iframescrollbar

別の問題:

iframe の div が全幅を占有しません。親 div #container 75% 内に収まるように、#list に 20%、#links に 55% を配置しました。これは起こりません!!

4

1 に答える 1

2

全高を占有する要素と子要素を設定height: 100%;する必要があります。<html><body>

この CSS を追加します。

html, body, .full-height {
    height: 100%;
}

body {
    margin: 0; // <-- to avoid unnecessary scrollbars.
}

full-height次に、コンテナの全高を占める要素にクラスを追加するだけです。


問題のデモ を提供する必要があります。提供しないと、すべての問題を解決することはできません。

ただし、いくつかのヒント：

  1. align属性を使用しないでください。非推奨です。代わりに CSS フロートを使用してください。

  2. infotextまたはwindowCSS の色の値を使用しないでください。それらはシステムカラーです。すべてのシステム カラーは、特定の OS とブラウザーの組み合わせでのみ機能するため、非推奨です。有効な色のキーワードのいずれかを使用するか、16 進数/RGB 表記を使用してください。

  3. <br>視覚的な間隔のためにタグを使用しないでください。代わりに CSS マージンを使用してください。

  4. <h4>s のようなインライン要素内に s のようなブロック レベルの要素を貼り付けないでください<span>。

  5. iframeを使用することをお勧めするケースはほとんどありません。問題を再考して、別の解決策を思い付くことができるかどうかを確認してください。

  6. 要素#headerを実際の<header>要素にします。IE8 をサポートするには、この回答の最後にある JS スニペットを JS に追加します。

  7. 要素#listを実際のリスト要素 ( <ul>)にします。リストのデフォルトのスタイルが気に入らない場合は、この回答の下部にある CSS スニペットを使用してリセットしてください。


JS スニペット:

document.createElement('header');


CSS スニペット:

ul.reset,
ol.reset {
    list-style: none;
    margin: 0;
    padding: 0;
}
于 2013-02-07T05:27:07.370 に答える