1

私はこの1日半の間これに取り組んできました。だからどんな助けでも大歓迎です。

一般的なレイアウトには、位置が固定されたトップバーとサイドバーがあります。コンテンツのために必要でない限り、コンテンツコンテナにスクロールバーなしでページの残りの部分を埋めてほしい。純粋にCSSで実行できるかどうか、またはhtml構造も変更する必要があるかどうかはわかりません。可能な限り最も簡単な例を示すために、以下にフィドルを投稿しました。

http://jsfiddle.net/wU2Hd/

繰り返しになりますが、正しい方向への助けやプッシュは大いに感謝されます、これは私をループに投げ込んでいます。

4

4 に答える 4

1

不可能ではありません。私があなたのものからフォークしたこのJSFiddleをチェックしてください。

HTML 構造を変更する必要はありませんでしたが、CSS にいくつかの重要な変更が加えられました。

height: 100%;最初にからを削除しましたhtml, body。これにより、スクロールバーが強制的に表示されました。

次に、からheightandwidth宣言を削除し、絶対配置を指定しました。.content#shell-content

#shell-content {
    background: #FFFFFF;
    position:absolute;
    left: 100px;
    top: 86px;
    bottom: 0px;
    right: 0px;
    overflow-y: auto;
}​

leftとはtop、ヘッダーに指定した明示的な高さと、メニューに指定した明示的な幅に基づく値です。はoverflow-y: auto、コンテンツが利用可能なスペースを超えた場合にのみスクロール バーを表示し、それ以外の場合は表示しないように指示します。

JSFiddle には、効果を示すために非常に長い lorem ipsum テキストがあります。テキストを少なくすると、スクロールバーが完全に消えます。

于 2012-08-21T21:48:26.500 に答える
0

問題は、あなたが設定していることです

#shell-content{
    height:100%
}
body{
    height:100%
}

これは、ボディがウィンドウに収まるように塗りつぶされ、次にシェル コンテンツがそのスペース (直接の親の正確なサイズ) を満たすように拡張されますが、シェルトップ ラッパーによって置き換えられるため、オーバーフローすることを意味します。シェル トップ ラッパーの相対的な高さを決定するか、(JavaScript を使用して) シェル コンテンツの高さを動的に変更する必要があります。

于 2012-08-21T21:28:59.683 に答える
0

これがあなたのフィドルからの脱却です: http://jsfiddle.net/eeMz4/。コンテンツ領域に大きな画像があると、スクロールすることがわかります。画像を取り出してテキストまたは使用可能なスペースよりも小さいものに置き換えると、スクロールバーが消えます。

トリックはoverflow:auto#shell-content に追加することでした。

乾杯！

シンシア

于 2012-08-21T21:33:27.600 に答える
0

いくつかの小さな変更を加えました: http://jsfiddle.net/wU2Hd/5/
- コンテンツから高さを
削除 - コンテンツシェルから高さを削除
- ボディの背景を白に
設定 - サイドバーの背景をグレーに設定

これは実際にコンテンツを引き延ばすわけではありませんが、そのように見えます。コンテンツがビューポートよりも大きくなると、スクロールバーが自動的に表示されます。

于 2012-08-21T22:40:17.120 に答える