1

次のように、いくつかの異なる要素を含む列があります。

<div id="column">
    <h2>Title - can be any length</h2>
    <p id="content">Lorem ipsum, yadda yadda yadda...</p>
    <button>There might be a button here.</button>
    <p>Another paragraph.</p>
    <button>A button here.</button>
</div>

ウィンドウのサイズに応じて流動的なレイアウトを使用しています。上記のように、要素にはさまざまな量のコンテンツがあり、存在する場合と存在しない場合があります。

要素のスタイルを設定できるようにして、要素がすべて上に重なるようにしたいと考えています (明らかに単純です)。ただし、結合されたコンテンツがコンテナーよりも高い場合を除きます。この場合、スクロールバーを使用<h2>して、最初<button>から最後まですべてを一番下に<p id="content">置き、残りの高さを埋めるようにします。

純粋な CSS ソリューションは素晴らしいものですが、とにかくサイト全体で jQuery を使用しているので、何でも仕事を終わらせることができます。これは非常に単純なことだと確信していますが、私の人生ではそれを理解することはできません.

jsfiddle - http://jsfiddle.net/C4hzp/

4

1 に答える 1

1

別のアプローチを更新max-heigthします。コンテンツを のコンテナに入れます。これにより、最大の高さに達するまで任意の高さにすることができます。その後、スクロールバーが表示されます。

<div id="column">
    <h2>Title - can be any length</h2>

    <p class="content">       <!-- Scrollbar starts here -->
        Lorem ipsum, yadda yadda yadda...
    </p>                      <!-- Scrollbar ends here -->

    <button>There might be a button here.</button>

    <p class="content">      <!-- Scrollbar starts here -->
        Another paragraph.
    </p>                     <!-- Scrollbar ends here -->

    <button>A button here.</button>
    <!-- Etc. -->
</div>

CSS:

p.content {
    max-height: 100px;
    overflow:auto;
}

働くJSfiddle

于 2012-08-28T11:25:57.213 に答える