0

次のようなプログラムの出力用のWebインターフェイスを追加しました。

<body>
<table id="header" approx height is 100px, width is 50% of screen located in the middle>
...
</table>
<div id="programoutput">my program outputs stuff here using Ajax.PeriodicalUpdater</div>
</body>

私はdivにcssを使用します

#programoutput{ white-space:pre; }

プログラムからの出力には、非常に長い行が含まれる場合があります。したがって、Webページには水平スクロールバーが必要です。私が欲しいのは、＃headerが常に画面の中央（本体ではなく）にあり、本体が#programoutputの幅に基づいてビューポートよりも広くなる可能性があることを確認することです。

ほぼすでに取得していますが、いくつか問題があります。ウィンドウではなく、＃programoutput自体に水平スクロールバーが表示されます。出力の高さが小さい場合（この場合は数行のように）、水平スクロールバーはウィンドウの中央にあります。

4

1 に答える 1

1 
#header
{
 position:fixed;
 width:50%;
 left:25%;
}
#programoutput
{
 white-space:pre;
 overflow:visible;
}

この時点で、ビューポートtableの中央に配置する必要があり、スクロールバーを生成するのに十分な長さである必要があります。divbody

しかし、tableはなのでposition:fixed、あなたdivはあなたのテーブルの上に「浮かぶ」でしょう。今、いくつかのオプションがあります：

1。divあなたのトップの位置を与えます：

position:relative;
top:100px; /* you'll have to know your table's height */

2。（これはコードピースで有効と思われます）divの下部に配置します。body

position:absolute;
bottom:0px;
于 2012-08-23T03:59:23.090 に答える