0

さまざまなサイズのdivを含むダッシュボードのタイプに取り組んでいます。高さと幅は現在パーセンテージベースであり、各divボックスのコンテンツは動的です。ボックスの内容を説明する素敵なヘッダーを作成する必要があります。

ヘッダーは現在ボックス内にあります。これは、オーバーフローが関係しているときに多くの問題を引き起こし、内部コンテンツの間隔を煩わしくします。

div内に完全なサイズのヘッダーを取得する簡単な方法はありますか、それとも小さな帽子のようにボックスの上に配置する方が簡単ですか。

これは私が望むものに非常に近いですが、ヘッダーはコンテンツとともにスクロールします！それは本当にひどいです。

タイトルヘッダーを使用してdivを作成する

なぜこれがそんなに難しいのですか？

これが私が欲しいものです。それ自体のコンテンツを説明する、矛盾のようなウィジェットです。

これが私が望むものにかなり近づくフィドルです

http://jsfiddle.net/exrXR/1019/

しかし、Position Absoluteは、非常に多くのことを完全にオーバーライドします...

4

1 に答える 1

2

質問を編集してデモへのリンクを含める前に、このデモをまとめたので、これが最初の反復ですが、リンクされたデモを見ると、マークアップはかなり近いようです。

<div class="dashWrap">
    <h2>header</h2>
    <div class="dashContent">
        <p><!-- content --></p>
    </div>
</div>​

次のCSSは、必要に応じて機能するようです。

.dashWrap {
    width: 50%;
    margin: 0 auto 1em auto;
}
.dashWrap h2 {
    background-color: #ffa;
    border: 2px solid #000;
    border-radius: 0.5em 0.5em 0 0;
    text-indent: 0.5em;
}

.dashWrap .dashContent {
    max-height: 5em;
    overflow-x: hidden;
    overflow-y: auto;
    border: 2px solid #000;
    border-top-color: transparent;
}​

JSフィドルデモ。

OPからの次の質問を編集しました（コメントで）：

...なぜそれが機能するのか分かりません。ヘッダーが奇跡的に所定の位置に留まる理由について簡単に説明していただければ、非常に役立ちます。

「所定の位置に」留まる理由は、単純に、移動していないか、デフォルトの動作h2を変更していないためです（デフォルトは）。これは、ドキュメントのフロー内のその場所にとどまることを意味します。displayh2display: block

その兄弟である.dashContent、要素は2つのルールがあるため、スクロールできます。1つ目はmax-height、要素がその子孫要素に対応するために垂直方向に成長するのを防ぐもので、2つ目はoverflow-y（一部のブラウザではこれoverflow-xも設定する必要があるため、上記）、コンテンツ.dashContentをスクロールできるようにします。

于 2012-06-04T14:15:44.553 に答える