5

私は明らかに簡単な問題を抱えています：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>​

コンテナ内に 3 つの div があります。A と B の高さは固定です。C は拡張可能な高さである必要があり、コンテナーの高さと一緒に拡張されます。C 内のコンテンツが大きすぎる場合は、C をスクロールさせたいのですが、A と B は同じ場所に置いておきます。

コード: http://jsfiddle.net/V2c9G/

私はそれをすることができません。

私は試した：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="xxx" style="overflow-y:scroll">
       <div class="c"></div>
    </div>
</div>​

成功せずに。ブラウザに沿ってサイズ変更されるコンテナ div。

複雑な例はhttp://www.sencha.com/examples/#overviewです (レイアウトについて話しているので、ブラウザを小さくすると、ヘッダーが固定されたままスクロールが表示されます)。 JS を使用して高さを再計算します。

何か案が？

4

7 に答える 7

1

overflow-y:scrollあなたはで申請する必要があります.container

これを見て、

http://jsfiddle.net/v4ZtN/

編集（コメント後）：

Css：

.container{
    background-color: red;
    width: 90%;
    margin: 0 auto; 
    height:220px;
}

.a{
   background-color: yellow;
   height: 30px;  
   margin: 2px;    
}

.b{
   background-color: blue;
   height: 30px;
   margin: 2px;    
}

.c{
   background-color: green;
   overflow-y: scroll;    
   height:inherit;
}

HTML：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"><img src="http://www.boingboing.net/images/_documents_anemone_images_anemone850-1.jpg" alt=""/></div>
</div>

編集：2（コメント後）

.cこれでスタイルを変えましょう。

.c{
       background-color: green;
       overflow-y: scroll;    
       height:100%;
    }

このフィドルを確認してください：http： //jsfiddle.net/XM4gH/6/

于 2012-04-04T20:18:52.510 に答える
1

http://jsfiddle.net/QsLFt/のようなものを探していると思います。ただし、スクロールバーを隠しているdivを取り除く方法がわかりません。最も簡単な解決策は、おそらく固定幅に設定することでしょうか?

于 2012-04-04T20:08:30.203 に答える
1

編集3：

これは私が推奨するソリューションで、以下の Edit 2 の CSS をフォールバックとして使用しますが、JavaScript を使用して、ロード時およびウィンドウ サイズが変更されたときに div のサイズを適切に変更します。CSS ソリューションは、クライアントで JavaScript が無効になっている場合に適切な出発点を提供し、JavaScript がページのパフォーマンスに実際に影響を与えるべきではないため、表示したいものを完成させるために JavaScript を使用しない理由はないと思います。動作するフィドルはこちらで見ることができます。また、適切な JavaScript コードは次のとおりです。

var resizeDiv = function(){
    document.getElementById('c').style.height = getWindowHeight() - 64 + 'px';
};

//Framework code
var getWindowHeight = function(){
    if (window.innerHeight) {
        return window.innerHeight;
    }
    if (document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetHeight ) {
        return document.documentElement.offsetHeight;
    }

    return 740;//provide a default height as a fallback
};

//resize on pageload
window.onresize = resizeDiv;
setTimeout(resizeDiv);



3 番目の div の絶対高さを調整して、残りのスペースを (絶対またはパーセンテージで) 占有し、親 div でオーバーフローを非表示に設定し、3 番目の内部 div のコンテンツでスクロールバーを表示するかどうか。 これは、絶対高さ法を使用した更新されたフィドルです。

編集：

「コンテナがブラウザであると想像してください」というコメントから（これは、スクロールバーがコンテナ上にあることを意味します）、オーバーフローを「スクロール」に設定し、3番目のdivの高さを「自動」に設定するだけです'。 そのための更新されたフィドルを次に示します。

編集＃2：

この質問に対するあなたのコメントによると、パーセンテージ メソッドを使用する必要があるようです。最も簡単な方法は、a、b、および ca の高さをパーセンテージにすることです (すべてのズームに合わせて余白を微調整する必要がありました)。残念ながら、この方法では上部のコンポーネントが固定されず、ファンキーに見える静的コンテンツをそこに表示しているように思えます。したがって、ブラウザ ウィンドウでサポートされている最小サイズを選択し、3 番目の要素のパーセンテージを調整してちょうど収まるようにするという別のオプションがあります。 これがそのためのフィドルです. ただし、ウィンドウの高さが大きくなるほど、ページの下部に空きスペースが増え、特定の高さより下に 2 つのスクロールバーが表示されるという欠点があります。上部の固定サイズの div でこれを適切に行うには、window.resize メソッドにイベント リスナーを追加し、ウィンドウの新しいサイズに基づいて適切に発生したときに 3 番目の div のサイズを変更する必要があります。

注: W3C が高さ、幅、およびその他のサイズ変更プロパティのパーセンテージとピクセルを承認することを望むのは、このような場合です!

于 2012-04-04T20:14:06.830 に答える
0

この回答はあなたの要求に一致しましたか？ここにリンクの説明を入力してください

.container{
    background-color: red;
    width: 90%;
    margin: 0 auto;

    height: 315px;
}
.a{
   background-color: yellow;
   height: 30px;  
   margin: 2px;    
width: 90%;
}


.b{
   background-color: blue;
   height: 30px; 
   margin: 2px;    
width: 90%;
}

.c{
   background-color: green;
   height: 250px; 
   margin: 2px; 
width: 90%;    
   overflow-y: scroll;    
}
​
于 2012-04-04T20:22:13.300 に答える
0

div は、データを入れたときにのみスクロールを表示します。結果は次のとおりです。 jsfiddle

于 2012-04-04T20:09:35.490 に答える
0

質問に基づいて何をしようとしているのかを正確に伝えるのは難しいですが、これが望ましい結果である場合、これらは私があなたのコードで発見した問題です:

  1. 赤いボックスのオーバーフローを非表示にする必要があったため、緑のボックスがコンテナーを超えないようにする必要がありました
  2. 緑色のボックスで、拡張するのに十分なデータがある場合は、スクロール バーが必要です。これは機能していましたが、具体的に設定した高さ (250px) は、コンテナーからはみ出すのに十分でした。ここで特定の高さが必要です。数値はコンテナに残っているものです。132pxになりました。次に、オーバーフロー スクロールを適用すると、この高さを超えるものはすべてスクロール可能になります。
于 2012-04-04T20:32:54.310 に答える
0

jsFiddle の現在の状況に基づいて、これを .container クラスのスタイル宣言に簡単に追加できると思います。

    overflow:hidden;

ただし、スクロールを表示するには、実際に .c div にコンテンツを追加する必要があります。

于 2012-04-04T20:12:11.650 に答える