0

私は自分のデータグリッド用のjqueryプラグインに取り組んでいます。私が直面している問題は、あるdivが別のdiv内に切り取られていることです。残りのスペースを埋めるために最後のdivが必要です。可能であれば、js/jqueryを使用せずに高さを計算したいと思います。IEやFirefoxとの互換性すら必要ありません。Chromeだけです。

ここに問題のデモがあります：http： //jsbin.com/ubiniy/1

ご覧のとおり、下部のスクロールバーは表示されていません。高さが92％の場合、一部の寸法では表示されますが、他の寸法では表示されません。

前もって感謝します。

4

2 に答える 2

1

を削除するだけで、パディングまたはマジンを削除overflow:auto;し.dlgridて端まで作ることもできます。

overflow:auto;または、を削除したくない場合は、.dlgrid作成できます

<div>Title</div>
<div>Title 2</div>

<div class="dlInnerDiv" style="overflow:auto; height:94%;">

に

<div style="height:3%;">Title</div>
<div style="height:3%;">Title 2</div>

<div class="dlInnerDiv" style="overflow:auto; height:94%;">

ここで役立つかもしれない何かの詳細

于 2012-12-20T16:49:33.280 に答える
0

問題は、宣言したように親の高さを継承することですが、タイトルにはさらに2つのdivがあるため、100％を超えてスクロールするため、すべての余地がありません:)

OKここにアプローチがあります：

ただし、タイトル div が 1 行のみであることを確認する必要があります。そうしないと、間違った計算になってしまいます。

もしそうなら、これを追加します

    <div class="dlgrid" style="overflow: hidden;......height:700px;">

    <div class="title">Title</div>
    <div>Title 2</div>
    <div class="dlInnerDiv" style="overflow:auto;">....

CSS:

div.title{
  line-height:20px;
}
div.title + div{
  line-height:18px;
}

また

div.title{
   height:20px;
}
div.title + div{
   height:18px;
}

その場合、700-20-18 = 662、またはそれらに与える高さが何であれ、残りは次のとおりです。

div.dlInnerDiv{
    max-height:662px;
 }

また、次のような不要なマージンとパディングをすべてリセットする必要があります

div.dlgrid,div.dlgrid div{
   margin:0; 
   padding:0;
}

または任意の値ですが、上記の高さを合計するときに考慮してください。これは、これらの垂直方向が関与する各要素に影響を与えるためです。

私が理解したことを願っています。これがあなたが求めているものですhttp://jsbin.com/ubiniy/23 :)

これはその特定の問題のみを解決し、望ましくない動作が発生する可能性があることに注意してください。そのため、特定の状況に応じて動的コンテンツの高さを修正するこのようなアプローチはお勧めしません.

私のアドバイスは、他の人がグリッドを作成してこの問題をどのように解決したか、またはもう一度お湯を見つける必要がないものを見てください:)

于 2012-12-20T16:44:37.953 に答える