8

私が解決しようとしている問題は非常に単純ですが、CSS テクニックを使用して目的を達成するのは難しいと感じています。

div私が望むのは、高さを相対値 (100% または 30% など) に設定したある種の親を持つことです。これは単に部分的なものであり、レイアウト全体を説明することはこの質問を超えているため、なぜそれが必要なのかを尋ねないでください.

この親の内部には、多くのテキストを含む子がh1続くヘッダーが必要です。そして最も重要なことは、ヘッダーが常にコンテナーの上部に接続されたままになるように、子 div 内にのみスクロールバーを配置する必要があることです。div

マークアップ:

<div class="wrapper">
    <h1>Test</h1>
    <div class="text">
        Lorem ipsum (... lots of text)
    </div>
</div>

(ない) 作業フィドル: http://jsfiddle.net/CodeConstructors/BEVSS/

4

2 に答える 2

1

次のように、CSS3 プロパティ calc() を使用できます。

html, body { height: 100% }
.wrapper {
    height: 30%;
    overflow: hidden;
    width: 400px;
    background-color: yellow;
}
h1 {height: 20px}
.text { 
  overflow: auto; 
  height:-webkit-calc(100% - 20px);
  height: -moz-cale(100% - 20px);
  height: -ms-cale(100% - 20px);
  height: -o-cale(100% - 20px);
  height: cale(100% - 20px);
}

見出しの高さを定義する必要があります。DEMO。calc() の使用方法を知りたい場合は、ここをクリックしてください。

于 2013-06-10T06:27:26.813 に答える