1

チャットページをコーディングしようとしていますが、div のサイズ設定に問題があります:/ 私は次のような構造を持っています:

<div class="page">
  <div class="chat-holder">
    <div class="chat-text">
    </div>
  </div>
</div>

ページクラスは（画面の幅と高さだとしましょう

.page {
  width: 100%;
  height: 100%;
}

チャットホルダーの幅は740px、高さは任意の高さである必要がありますが、ブラウザの高さ、背景の白、チャット領域の周りの20pxのパディングを超えてはなりません(これまで試しました):

.chat-holder {
  background: #fff;
  width: 740px;
  max-height: 100%;
  padding: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

今私のチャットエリアは、このチャットホルダー内に1pxの黒い境界線を持ちたいと思っています.チャットがブラウザから40pxのパディングを引いたものよりも大きくない場合は、そこにあるテキストのサイズにしたいと思います. 大きい場合は、その中にスクロールしたい（これまでのところ、これを試しました）

.chat-text {
  width: 100%;
  max-height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
}

しかし、これは機能しません.chat-text divはchat-holderから出ています.max-heightがmax-height内で機能しないためです。jQueryなどを使用して修正したくないので、この問題の回避策があることを願っています。

前もって感謝します

編集: jsFiddle http://jsfiddle.net/KjX7s/2/

4

2 に答える 2

3

高さと最大高を設定する必要があります。

.page {
  width: 100%;
  height: 100%;
}
.chat-holder {
  background: #fff;
  width: 740px;
  min-height: 20px;
  max-height: 100%;
  padding: 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.chat-text {
  width: 100%;
  min-height: 20px;
  max-height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
}

フィドルを参照してください: http://jsfiddle.net/KjX7s/14/

于 2012-11-02T15:59:31.423 に答える
0

追加

  overflow: auto;

内部.chat-holder。

CSS Calc() で計算された高さを入力します。

max-height: calc(100% - 41px);

http://jsfiddle.net/KjX7s/5/

于 2012-11-02T15:58:33.343 に答える