0

これが私がヒットした切り株です。

私は...モノを設計しています。ブラウザー ウィンドウに合わせてサイズが変更され、いくつかのコントロールが上部にあり、かなり大きなリストが下部に表示されます。とにかく、これは基本的にブラウザー ウィンドウに合わせてサイズ変更されるテーブル セルであり、そのサイズはドキュメント サイズ (高さ 130 ピクセル、ドキュメント サイズ - 幅 50 ピクセル) です。私がやりたいのは、そのセル内のもののリストがセルよりも大きい場合、cssのoverflow: autoを使用してスクロールすることです。

問題は、それを行うことができず、ドキュメント全体がスクロールするだけであることです。現在、セルには valign:top 以外のプロパティはなく、(リスト要素が書き込まれる) 単一の div があり、overflow:auto に設定されています。ただし、リストが長くなりすぎると、ドキュメント全体が拡大されるだけです。

ページのサイズに合わせてサイズを変更するため、静的サイズを指定したくありません。

何か案は？

ありがとう！-デイブ

4

5 に答える 5

1

正しく理解しているかどうかはわかりませんが、アイデアが得られる可能性のある試みを次に示します。

<head>
<title>Test</title>
<style>
div.outer {
    background-color: red;
    position: absolute;
    top: 40px; 
    bottom: 40px;
    left: 40px;
    right: 40px;
}
div.inner {
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    background-color: aqua;
}
</style>
</head>

<body>

<div class="outer">
<div class="inner">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</div>
</div>

</body>
于 2009-04-06T21:12:00.180 に答える
0

buti-oxa のソリューションは非常に優れていますが、Internet Explorer では機能しません。クロスブラウザー ソリューションの場合、リストを含む div に固定の高さを割り当てる必要があります。割り当てる高さはブラウザ ウィンドウの高さに依存するため、css だけを使用してそれを行うことはできません。ただし、単純な JavaScript 関数を使用して、高さを div に動的に割り当てることができます。jQuery を使用した例を次に示します。

function resizeDiv(){
    var h = $(window).height(); //maybe the window height minus the header and footer height...
    $("#yourDivId").css("height", h + "px");
}

ページがロードされたとき、およびユーザーがウィンドウのサイズを変更したときに、この関数を呼び出す必要があります。

$(document).ready(function(){

    resizeDiv();

    $(window).resize(function(){
        resizeDiv();
    });

 });

これは、私が投稿したこのデモ ページで実際に確認できます (ウィンドウのサイズを変更してテストします): http://www.meiaweb.com/test/BMS_DM_NI/

于 2009-04-06T21:28:25.367 に答える
0

流動的なレイアウトの設計パターンを検討する必要があると思います。

いくつかのヒント:

  1. MediaQueries
  2. pxなどの固定値の代わりに%を使用する
于 2012-11-08T22:10:40.130 に答える
-1

iFrame が役立つと思います。あなたの「もの」をベース URL に入れてから、iFrame のある別のページを使用してそれをロードします。「もの」のサイズが狂ってしまうと、スクロール バーが表示されますが、外側のページには影響しません。

昔ながらのフレームも機能するはずですが、iFrame の方が楽しいだけです ....

于 2009-04-06T20:20:05.937 に答える