0

現在、非常に奇妙なポジショニングの問題があります。4時間後、あきらめます。シンプルな通常のレイアウトのシンプルなタブ付きアプリがあります。

http://mercmobily-bookingdojo.nodejitsu.com/pages/login (test/test) 回答が得られたら、スナップショットがオンラインのままであることを確認します。

上部に追加フィールドを含む「上部ウィジェット」があり、その下に dgrid があります。「狭いウィジェット」という別のウィジェットがあり、これは dgrid のすぐ下にあります。代わりに、それをオーバーラップします。

位置は、すべてのウィジェットで相対的または静的です。ただし、上部のウィジェットの高さが「足りない」ように見えるため、狭いウィジェットがdgrid の上に配置されます。

確認して確認して確認しました...ヒントはありますか？

メルク。

4

2 に答える 2

1

Linus の回答に加えて、それを修正するために、編集ウィジェットに絶対配置を適用することができます。これにより、フローから抽出され、目的の結果が得られます。

.editing-widget {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

また、正しく整列させるためにto を追加する必要がありますposition: relative。#dijit__WidgetBase_0

これにより、編集ウィジェットが に含まれるテキストとオーバーラップします#dgrid_1。親 ( #dijit__WidgetBase_0) に padding-top を追加することで修正できます。たとえばpadding-top: 36px、トリックを作成します。

編集ウィジェットをフロー内に保持したい場合は、簡単な css3 宣言が役立ちます。

#dgrid_1{
    height: calc(100% - 30px);
}

現在、すべてのブラウザーが標準の CSS3 calc() 関数をサポートしているわけではないことに注意してください。そのため、次のようにブラウザー固有のバージョンの関数を実装する必要がある場合があります。

/* Firefox */
height: -moz-calc(100% - 30px);
/* WebKit */
height: -webkit-calc(100% - 30px);
/* Opera */
height: -o-calc(100% - 30px);
/* Standard */
height: calc(100% - 30px);

(ソース: CSS: 幅/高さをパーセンテージからピクセルを引いた値に設定)

于 2013-03-28T09:46:21.640 に答える
1

あなた#dgrid_1には がありますがheight: 100%、それだけがコンテンツではありません。2 つの入力フィールドもあります。

于 2013-03-28T09:34:01.223 に答える