2

ここに表示しようとした特定のレイアウトを実現しようとしています: http://tmp.grytoyr.net/layout/

基本的に、独自のスクロールバーを持つ複数の絶対配置要素を使用しようとしています。課題は、要素の高さを正しくして、スクロールバーが自然に見えるようにすることです。もう 1 つの要件は、左右が常にメイン コンテンツ領域の 50% を占める必要があることです。

Mac の Chrome と Safari では期待どおりに動作しますが、Firefox では、ヘッダー (メニュー、左、右) によって押し下げられたスクロール可能な要素のスクロールバーがビューポートの下に伸びます。

これは、Firefox が高さを解釈するためだと推測しています: Webkit ブラウザーとは少し異なる、その上にいくつかのコンテンツがある絶対配置要素の 100%。

最新のすべてのブラウザーで目的のレイアウトを実現する方法はありますか?

編集：私はちょうどそれを理解したので、私は自分の質問に答えます。

Firefox がサポートしていると思われる "box-sizing: border-box" を追加しましたが、"-moz-box-sizing: border-box" も追加する必要があることがわかりました。

Edit2 : ただし、rgthree による回答を必ず確認してください。これは、私が望んでいたレイアウトを実現するためのはるかに優れた方法であるためです。

4

1 に答える 1

1

はい、この場合、100% の高さを使用することはできません。これはコンテナーの高さになり、オーバーフローの原因となる追加の要素/パディング/オフセットがあるためです。

たとえば、コンテナーの高さが 500px に設定されていて、高さが 100% の子コンテンツ要素がある場合、その高さも 500px になります。ただし、その子要素を 50px の別の要素 (たとえば、例のヘッダーのように) の下で開始すると、高さの合計は 550px (50px のヘッダー + 500px の「100%」コンテンツ) になります。

あなたの例でできることは、すべてが絶対にレイアウトされているため、上/右/下/左を使用することです。コンセプトは次のとおりです。

/* The container -- height/width doesn't matter */
.container {position:relative; height:500px; width:500px;}
/* A 50px tall header -- notice no width is set, but left/right is set to 0 */
.container > .header {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  height:50px;
}
/* The content under the header -- notice no height or width is set */
.container > .content {
  position:absolute;
  top:50px; /* 50px top to be below the header */
  left:0px;
  right:0px;
  bottom:0px; /* Bottom is 0 so it will stretch the rest of the height */
  overflow:auto;
}

さて、このテクニックをネストされたすべてのアイテムに適用するだけで、ビジネスになります.

于 2012-04-24T18:20:47.380 に答える