5

私はDIVコンテナを持っています。これは他の2つのDIVコンテナと.floatingPageの上に絶対的に配置されています。私の問題は、要素のコンテンツが動的であり、画面の表示部分の下に広がる大量のデータが含まれている場合があることです。.top.bottom.floatingPage.floatingPage

.top { 
  height:350px; 
  background:'images/background.png'; 
  position:relative; 
}

.bottom { 
  height:350px; 
  background:#F1F1F1; 
}

.floatingPage { 
  position:absolute; 
  top:50px; 
}
<div class="top">
    <div class="floatingPage">
        // blah blah blah (lots of data)
    </div>
</div>

これで、アプリのユーザーがJS（会社のコントロールパネル）を使用していることがわかったので、要素の高さを計算し、新しいコンテンツに合わせて.floatingPage高さを拡張しました。.bottomこれは今までは問題なく、問題を引き起こし始めました。さらに、JSを持たないユーザーがいる他のプロジェクトに対してこのハックをしたくありません。

この要素を他の2つの要素の上に浮かせる必要があります。これfloatingPageが、サイトの設計の要点です。この影響を維持しながら、JSなしでページからはみ出さないようにするにはどうすればよいですか？

4

4 に答える 4

1

これを試して：

.top { 
  height:350px; 
  background:'images/background.png'; 
  position:relative; 
}

.bottom { 
  height:350px; 
  background:#F1F1F1; 
}

.floatingPage { 
  position:absolute; 
  top      : 50px; 
  bottom   : 50px;
  overflow : auto;
}
<div class="top">
    <div class="floatingPage">
        // blah blah blah (lots of data)
    </div>
</div>

于 2012-10-12T00:22:34.403 に答える
0

Have you tried absolute positioning specifying the bottom, rather than the top for the .floatingPage element?

eg:

.floatingPage { position:absolute; bottom:10px; }
于 2012-10-12T00:20:44.340 に答える
0

オーバーフロー属性を使用して、DIV の高さを設定してみましたか?

于 2012-10-12T00:22:34.990 に答える
0

要素を他の 2 つの要素の上に浮かせる必要がある場合は、z-index を追加して、overflow を使用してみてください。

ここにjsfiddleがあります：http://jsfiddle.net/k8w79/

于 2012-10-12T00:24:21.343 に答える