html - CSS
子要素より短いスタイル

Question

Spring MVC の実践に関する知識を深めるためのプロジェクトに取り組んでいます。これを行うために、私は非常に縮小されたバージョンの Twitter を作成しています。基本的に、ユーザーはサインインして簡単な宣伝文句を投稿できます。また、以前の宣伝文句とすべてのフォロワーの宣伝文句のタイムラインも表示できます。

ページ全体に背景画像を配置し、中央にコンテナーを配置し、投稿の宣伝文句ボックスとタイムラインだけを背景に水色の背景を配置しました。水色の背景は、表示されているページの下部にのみ表示されます。タイムラインが下にスクロールしなければならない 1 つのページビューを過ぎた場合、水色の背景は最初の読み込みで表示されていたものの下部で停止します。

私のページは次のように定義されています: div class=blurb はタイムラインの宣伝文句です。

<div id="container">
    <div id="mainPanel">
        <div id="timeline">
                <div class="class="blurb"">
                    <span class="user">test</span> <span
                        class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
                    <span class="timestamp">1 hours ago</span>
                </div>

                <div class="blurb">
                    <span class="user">admin</span> <span
                        class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
                    <span class="timestamp">1 hours ago</span>
                </div>  
        </div>
    </div>
</div>

コンテナーの CSS スタイルを以下に示します。

#container {
    width: 650px;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
    background-color: #DDEEF6;
}

そのコンテナ CSS を変更して、タイムラインと同じ長さになるようにすることはできますか? タイムラインは宣伝文句の投稿ごとに大きくなります。

高さを 100% に定義したスクリーンショットコンテナースタイルで 100% に定義された高さ

高さ未定義のスクリーンショットコンテナのスタイリングで未定義のままの高さ

更新： わかりましたので、それは絶対にフロートと関係があります. 以下の2人のコメント者に感謝します。#socialPanel は次のように定義されています。

#socialPanel {
    width: 250px;
    float: right;
}

Chrome の開発者ツールを使用して、フロートをクリアすると、ソーシャルパネルが宣伝文句/ツイートの下にドロップされ、水色の背景が宣伝文句のリストのずっと下に移動します。

socialPanel を一番上に浮かせたままにするために調査できることについて何か提案はありますか? ここまで理解するのを手伝ってくれてありがとう！

更新 2:

私の問題を解決するために、以下の回答に示されている方法を組み合わせました。class clearer を使用して div を追加し、#container スタイリングからclear:both;削除しました。height: 100%;これで問題は解決しました。

注:コンテナのスタイリングにを追加するoverflow: hidden;と、水色の領域の後にページが切り取られました。水色の領域が完全に下に行くことはありませんでした。

すべての助けに感謝します！私はまだ学んでいて、とても感謝しています!!

score 2 · Accepted Answer

に配置overflow:hiddenし#containerます。

それはどのように機能しますか？

このスタイルをコンテナに配置すると、フロートを含めるのではなく非表示にすると思います。実際に起こることoverflow:hiddenは、要素に新しいブロックフォーマットコンテキストを確立させることです。これにより、その中に浮かんでいる子のフロート封じ込めが修正されます。clear:bothこのCSS修正は、IE7 +を含むすべての最新のブラウザーでスタイル設定され、機能するHTMLに追加の要素を含めるよりも実用的です。

score 1 · Accepted Answer

height: 100%;から高さ宣言（）を削除するだけ#containerで、子と同じように拡張されます（もちろん背景も）。

score 1 · Accepted Answer

おそらく、2 つの内部 div の後にクリア div を追加する必要があるだけです。http://jsfiddle.net/c3vTU/1/

<div class="outer">
  <div class="inner-left"> Stuff on the left</div>
  <div class="inner-right">Stuff on the right <br/><br/></div>    
  <div class="clearer"> </div>
</div>

CSS

.outer {
    width: 520px;
    padding: 10px;
    background-color: #eee;
}

.inner-left {
    float: left;
    width: 300px;
    background-color: red;
}

.inner-right {
    float: right;
    width: 200px;
    background-color: yellow;
}

.clearer {
      clear: both;

}

@MichaelIrigoyen が指摘したように、コンテナにoverflow: hiddenor overflow:auto(もっと理にかなっていると思います) を追加することもできます。http://jsfiddle.net/c3vTU/4/これはすっきりしていて気に入っています!

html - CSS子要素より短いスタイル

3 に答える 3

Related

Reference

html - CSS
子要素より短いスタイル