3

私のページにヘッダーがあります。そのコンテンツは折り返すことができるため、高さは固定されていません。ページの残りの部分は、コンテンツ コンテナで埋める必要があります。コンテナー内のコンテンツが多すぎる場合は、垂直スクロールを有効にする必要があります。私は多くの可能性を試しましたが、常に行き止まりです（位置：絶対または表示：テーブル）。今、私は出発点に戻りました:(

ここが私の仕事の原点です。緑色のコンテナが私のページです。JqueryUI を使用してサイズ変更可能にしていますが、JS 以外のソリューションを探しています。

お時間をいただき、ありがとうございます。

4

10 に答える 10

2

編集：多くの答えが近い場合でも、私はまだ述べthis behavior cannot be achieved only using CSS and NOT having a styling issueており、その理由を説明します.

問題：

  • ヘッダーがコンテンツを自由にラップできるようにすると、高さが変わります。
  • スクロール可能な領域をサイズ変更可能にし、すべてのラッパーを埋める必要があります。

ソリューション：

  • これを達成するために多くの答えがありました：
    • Benjaminのフィドルは機能しているように見えますが、実際には欠陥があります。提供されているフィドルでこれをテストしてください。2) テキストを選択してマウスを上下に動かし、選択中にスクロールバーを動かします。この欠陥により、メイン領域のサイズ変更に使用されるドラッグ可能なハンドラーが上に移動します。
    • Feantury answer のフィドルは、そのバグがないため、Benjamin のものよりも優れていますが、まだ欠陥があります。ドラッグ可能なハンドラーがスクロールバーの下矢印の上にあります。
    • Karl-André Gagnonのフィドルには、Benjamin のものと同じ問題があります。

ついに：

  • JNDPNTの答えはここにいくつかの光を落としました：I don't think what you want is possible in css... You should look into a JS solution I'm afraid.
  • css であまり性急にならないでください。多くのことは、見た目とは異なります。css もテストする必要があります。css のすべてのサイズ変更は、あなたの味方ではありません。ウィンドウやコンテナーのサイズ変更、ドラッグ アンド ドロップなどを行うと、多くのスタイルが壊れる可能性があります。
  • 非常にレスポンシブなデザインであっても、それらの多くは css ハック、および/または少なくとも javascript や jquery の基本的な使用のいずれかを行っています。

注：私は正直にOPを助けたかったのですが、これはプレーンなcssでは達成できないと確信しています。

javascript を使用しないと実現できないと思います。リクエストに合わせて作成した jsbin を次に示します。http://jsbin.com/acirez/1 をご覧ください。

結果は次のとおりです。

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

注: javascript は次のことを行うため、.pageおよびクラスを id に変更することを検討してください。.header

$('div.content').height($('.page').height() - $('.header').height());

水平バーを表示したくない場合は、overflow: scroll;for を変更してoverflow-y: scroll;ください。

それが役に立てば幸い！

編集：画像を追加しました。

于 2013-05-17T01:19:53.407 に答える
2

次のように解決できると思います。

.page {
  background-color: #8f8;
  min-height: 100%;
  width: 80%;
}

.header {
  background-color: #fdc;
  overflow: hidden;
}

.content {
  background-color: #ccf; 
  overflow-y: auto;
  height: 100%;
  width: 100%;
  /*word-wrap: break-word;*/
}

わかりました、私がやったこと:

  1. ページ: 高さのサイズが本当にわかっている場合は、単純に高さを 200px に設定できますがmin-height: 100%、ページがすべてのスペースを埋めるように追加する方が理にかなっています。
  2. ヘッダー: コンテンツが変更されたときにヘッダーのサイズを変更できるようにするには、オーバーフローを非表示に設定する必要があります。これにより、あらゆる種類のスクロールの表示が回避されます。もちろん、それは div のようなブロック要素でなければなりませんdisplay:block。
  3. コンテンツ: ここでは、高さをスペースの 100% として配置し、必要な場合にのみ垂直スクロールの可視性を許可し、表示するコンテンツが水平スクロールを表示できる場合にのみ単語を区切ります。

最後に、ページが一番下に表示されないように、ヘッダーをコンテンツ div の一部として配置します。詳しくはお尋ねください。

更新：これは私がテストした例です。

UPDATE2 私が得た最高のものはこれです：

.page {
  background-color: #ccf;
  max-height: 100%;
  width: 80%;
  overflow: hidden;
}

.header {
  background-color: #fdc;
  overflow: hidden;
}

.content{
  overflow-y: auto;
  height: 100%;
  word-wrap: break-word;
}

唯一の問題は、スクロールしているのはコンテンツだけでなくすべての「ページ」要素であるとスクロールが認識しているため、スクロールの最後の矢印が表示されないことです。これはjavascriptを使えば解決できると思いますが、cssではこれ以上の解決策はないと思います。

Javascript の可能な解決策:

$(window).resize(function() {
     resizeContent();
});
$(document).load(function(){
  resizeContent();
});
function resizeContent(){
  $('.content').height($(".page").height()-$('.header').height());
}

最終的な解決策へのリンクはここにあります

于 2013-05-14T22:51:19.320 に答える
1

あなたが望んでいることはcssで可能だとは思いません...あなたはJSソリューションを調べるべきだと思います。

テーブルプロパティでテストしましたが、ヘッダーを柔軟にするのは簡単です。コンテンツで残りを埋めるのも簡単です...しかし、テキストが長くなりすぎると、残りのコンテンツをスクロール可能にすることができません。私はその解決策を見つけることができません。率直に言って、解決策は存在しないと思います。私が間違っていることを証明してください...これに対する純粋なcssソリューションを見つけることは興味深いでしょう:)。

これは私が得る限りです：

http://jsbin.com/ivuvag/1/

于 2013-05-10T11:20:19.110 に答える
1

試す

height:60px;
  overflow-y: scroll;

http://jsbin.com/ifuwaz/1/

于 2013-05-10T11:48:18.800 に答える
1

div.content に overflow-y: scroll プロパティと、div.page を超える高さを与えます。高さを100％にしました。次に、div.page のオーバーフローを非表示にします。

.page {
  background-color: #8f8;
  height: 200px;
  width: 80%;
  overflow: hidden; 
}

.header {
  background-color: #fcc;
}

.content {
  background-color: #ccf; 
  overflow-y: scroll;
  height: 100%
}

ボックスが実際に詰まっている場合、これはオーバーフローの最後のビットを遮断しますが、div.content のサイズを動的に変更するためにいくつかの js を使用せずに考えることができる唯一の解決策です。

于 2013-05-14T13:58:53.670 に答える
1

DOM を移動できるかどうかはわかりませんが、移動できる場合は、コンテンツ ページにヘッダーを配置することをお勧めします。これは最も利己的な方法ではありませんが、JS なしで得た唯一のアイデアです。

したがって、コンテンツにヘッダーを入れてから、コンテンツmin-heightを 100% に設定します。コンテンツは常にその親を埋め、テキストがコンテナーよりも長い場合、スクロール バーが表示されます。

これをチェックして

サイズ変更可能なため、スクロールバーは常にそこにあることに注意してください。あなたの文脈では、それはありません。

于 2013-05-11T17:16:14.457 に答える
1

コンテンツを親の高さの 100% にするだけです。

.content {height: 100%;}
于 2013-05-10T11:27:27.203 に答える
1

簡単な解決策は、#content に以下を追加することです。

  height:100px;
  overflow-y: scroll;

これは彼がとどまる高さをそれに与えます。はoverflow-y:scroll;、100px 以降のコンテンツをスクロール可能にします。

さらに必要な場合は、次のように最小高と最大高を指定できます。

  min-height:100px;
  max-height:600px;
  overflow-y: scroll;

この状況では、高さが 600px に達するまで塗りつぶし続けてから、overflow-y:scroll;

//更新しました//

コンテンツとヘッダーの位置を#page に配置しrelativeて適用するheight:auto; padding-bottom:50px;

于 2013-05-07T14:21:04.717 に答える
0

わかりましたので、あなたが正確に何を望んでいるかはよくわかりませんが、ここに行きます.

http://jsbin.com/asazaq/1/edit

ヘッダーの高さを固定値に設定しない場合、ヘッダーとコンテンツの両方を使用可能なすべてのスペースに埋めるための JavaScript 以外の方法はありません。

Css3 の Calc 関数を使用した 2 つ目の例を次に示します。

http://jsbin.com/asazaq/2/edit

多分それはあなたの好みに合っているかもしれませんが、古いブラウザではサポートされていません

于 2013-05-17T08:23:01.187 に答える