表示崩れの調整に四苦八苦したお話

プログラムやサーバサイドはある程度自力でなんとかなるのですが、デザイン周りというかCSSは苦手の一択であまり乗り気ではございません。

ただ困っている人がいればなんとかしてあげたくなるのでググりながら頑張りました。

背景色が途中で途切れる現象

例えばこんな感じで途中で背景色が切れてしまいます。
（実際は縦3000pxぐらいで2000pxぐらいから途切れてる）

HTMLがこんな感じで。

<div id="bodyfront" class="front">
  <div class="content">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</div>

CSSがこんな感じ。

#bodyfront {
    position: relative;
    min-height: 100px;
}
.front {
    background-color: #d3d3d3;
    display: block;
    clear: both;
    float: none;
    height: auto;
}
.content {
    height: auto;
    float: none;
    clear: both;
}

min-heightとかpositionとかdisplayとかいろいろ変えてもダメ。

height指定したらできるけど追記されていくから固定はダメ。

さ迷いながらググった結果、下記を発見。

float：親ボックスの背景色が表示されない件について | CSS | ぱたぱたアニメ館

英文のCSS仕様書を見ながらCSS（スタイルシート）のページを作っています。ウェブページ（ホームぺージ）を作成するHTML文書などのレイアウトやデザインに役立ちます。

pata2.jp

>overflow: hidden; を指定

>height が auto の場合は子要素の高さに依存する

floatが記述されているとheight:autoが効かないのでoverflow指定してあげる、ってこと？

ダメだ、図解説明があっても理解ができない。

とりあえずoverflow:hidden;を記述したら途切れるのが解消されました。

.content {
    height: auto;
    float: none;
    clear: both;
    overflow: hidden; /* add */
}

えーと、解決はしたけど原因はよくわかっていません。

まぁ要はfloatが悪いってことでしょ（投げやり）

わからないことをそのままほったらかしにするのはよくないけど。

時間があるときに勉強します！