2

画面に残っている垂直方向のスペースを占める中間コンテナーがあります。その中に、現在 200px に設定されている Jquery スクローラーを配置しました。

.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 100%;
}

ただし、.scroll-pane高さを 100% に設定すると、スクロールバーが削除され、ページ全体が引き伸ばされます。

ここでJsFiddleを参照してください

どうすればこれを止めることができますか? ありがとう！

4

3 に答える 3

2

これがこの問題に対する私の解決策です( jsfiddle )。次のようなマークアップを使用します。

<div id="top">...</div>
<div id="wrapper">
    <div id="middle">...</div>
</div>
<div id="bottom">...</div>

およびdiv は絶対topにbottom上下に配置されwidth、100%. ラッパーdivにはheight: 100%、box-sizing: border-box、 、および上下の div の高さにそれぞれ等しい上下のパディングがあります。これにより、ビューポートがいっぱいになりますが、上部と下部の div の下にパディングがあります。middlediv の高さは、100%ラッパーのコンテンツ ボックスを埋める (つまり、100%上下のパディングを差し引いたもの) です。両方の内部ボックスでposition: relative自由に使用できます。height: 100%

最後に、middleleftは絶対的に配置middlerightされ、その幅に等しい左マージンを持ち、残りの水平スペースを埋めます。

于 2012-10-11T02:58:09.873 に答える
2

height: 100%あなたが望むように機能することは決してありません。CSS 仕様では、ブラウザー ウィンドウの高さ、または絶対高さが指定された最も近い親ブロック レベル要素と同じ高さにする必要があると規定されています。つまり、このコードは 期待どおりに動作しないはずです。

<!DOCTYPE html>
<html>
 <head>
  <title>Want the body to fill the page? Too bad!</title>
  <style type="text/css">
   html, body {
    height: 100%;
   }
   .page {
    padding-top: 50px;
    box-sizing: border-box;
    height: 100%;
   }
   .header {
    margin-top: -50px;
    height: 50px;
   }
   .body {
    height: 100%;
    background: gray;
   }
  </style>
 </head>
 <body>
  <div class="page">
   <div class="header">
    <h1>Too bad!</h1>
   </div>
   <div class="body">
    <p>Hello cruel world...</p>
   </div>
  </div>
 </body>
</html>

ただし、Chrome では問題なく動作します。なんで？この場合、標準は意味をなさないため、Google が具体的に Web 標準に反することを決定したとしか考えられません。ブラウザー ウィンドウの正確な高さを求める必要があるのはなぜですか? 唯一の場合は、ページ全体をラップすることです。この場合、単純な「高さは親ブロックに相対的」というルールは、他の場所で期待を裏切ることなくうまく機能します。<div>

ただし、これを回避する方法があります。少なくとも、これを Firefox でも試す前に言いたかったことです。取得する別の方法height: 100%(いくつかの制限があります) は、 を使用することposition: absoluteです。position: relativeしかし、Firefox はある要素を尊重していないように思わdisplay: table-cellれます。おそらく、これらの厄介な標準も同様です。興味がある場合は、この手法のコードを次に示します。

#wrapper > div > #middleleft {
 position: relative;
}
.scroll-pane {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

それで、あなたは何ができますか？残念ながら、私はまだその答えを知りません。厄介な解決策は、Javascript で高さを絶対ピクセル値に設定し、その高さを更新するためにウィンドウのサイズ変更にイベントをアタッチすることです。良い方法を見つけたらまた連絡します。

于 2012-10-10T19:14:32.980 に答える
1

何をしようとしているのか正確にはわかりませんが、別の方法は、ボディの高さを 100% に設定してから、スクロールペインを「高さ: 自動」に設定することです。次に、「上」と「下」の div で使用される固定配置に、上/下の高さに等しいマージンを加えます。

body {
    height: 100%;
}
.top {
    position: fixed;
    top: 0;
    height: 100px;
}
.middle {
    height: auto;
    margin: 100px auto;
}
.bottom {
    position: fixed;
    bottom: 0;
   height: 100px;
}

<div class="top">content</div>
<div class="middle">content</div>
<div class="bottom">content</div>

それを試してみてください...

于 2012-10-10T19:26:09.457 に答える