web-dev-qa-db-ja.com

CSS：divを含む場合の自動高さ、divを含む内部の背景divの高さ100％

問題は、コンテナを高さ方向に引き伸ばすコンテンツdivがあることです（コンテナとコンテンツdivには自動高さがあります）。

バックグラウンドコンテナが必要です。これは、コンテンツdivの兄弟divで、コンテナを埋めるために拡大します。背景コンテナには、背景をチャンクに分割するdivが含まれています。

背景およびコンテナdivの幅は100％ですが、コンテンツコンテナの幅はありません。

HTML：

<div id="container">  
    <div id="content">  
        Some long content here ..  
    </div>  
     <div id="backgroundContainer">  
         <div id="someDivToShowABackground"/>  
         <div id="someDivToShowAnotherBackground"/>  
    </div>  
</div>

CSS：

#container {
    height:auto;
    width:100%;
}

#content {
    height: auto;
    width:500px;
    margin-left:auto;
    margin-right:auto;
}

#backgroundContainer {
    height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport.
}
cssheight
35
lukewm

2018年には、多くのブラウザが Flexbox および Grid をサポートしており、これらは非常に強力ですFaux ColumnsやTabular Displays（この回答の後半で扱われます）などの古典的な方法を際立たせるCSS表示モード。

これをグリッドで実装するには、コンテナでdisplay：gridとgrid-template-columnsを指定するだけで十分です。 grid-template-columnsは、使用する列の数に依存します。この例では、3列を使用するため、プロパティは次のようになります。grid-template-columns ：auto auto auto、これは基本的に、各列に自動幅があることを意味します。

グリッドを使用した完全な実例：

html, body {
    padding: 0;
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    width: 100%;
}

.grid-item {
    padding: 20px;
}

.a {
    background-color: DarkTurquoise;
}

.b {
    background-color: LightSalmon;
}

.c {
    background-color: LightSteelBlue;
}
<!DOCTYPE html>
<html>
<head>
    <title>Three Columns with Grid</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="grid-container">
        <div class="grid-item a">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
        </div>
        <div class="grid-item b">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
        </div>
        <div class="grid-item c">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
        </div>
    </div>
</body>
</html>

別の方法は、列のコンテナでdisplay：flexを指定してFlexboxを使用し、列に適切な幅を与えることです。私が使用する3列の場合、基本的に100％を3つに分割する必要があるため、33.3333％です（0.00003333を気にする人は近いです...とにかく見えません）。

Flexboxを使用した完全な実例：

html, body {
    padding: 0;
    margin: 0;
}

.flex-container {
    display: flex;
    width: 100%;
}

.flex-column {
    padding: 20px;
    width: 33.3333%;
}

.a {
    background-color: DarkTurquoise;
}

.b {
    background-color: LightSalmon;
}

.c {
    background-color: LightSteelBlue;
}
<!DOCTYPE html>
<html>
<head>
    <title>Three Columns with Flexbox</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="flex-container">
        <div class="flex-column a">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
        </div>
        <div class="flex-column b">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
        </div>
        <div class="flex-column c">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
        </div>
    </div>
</body>
</html>

Flexboxおよびグリッドは、2017/2018以降のすべての主要なブラウザでサポートされています。事実はcaniuse.comでも確認されています。 gridを使用できますか 、 flex を使用できます。

また、FlexboxおよびGrid、OneTrueLayout Technique、Faux Columns Technique、CSS Tabular Display Techniqueそして、Layering Techniqueもあります。

これらの方法はハック的な性質を持ち、私の意見ではそれほどエレガントではないので、これらの方法を使用することはお勧めしませんが、学術的な理由でそれらを知ることは良いことです。

同じ高さの列のソリューションは CSS表形式表示テクニック です。これはdisplay：table機能を使用することを意味します。 Firefox 2+、Safari 3+、Opera 9+およびIE8で動作します。

CSS Tabular Displayのコード：

#container {
  display: table;
  background-color: #CCC;
  margin: 0 auto;
}

.row {
  display: table-row;
}

.col {
  display: table-cell;
}

#col1 {
  background-color: #0CC;
  width: 200px;
}

#col2 {
  background-color: #9F9;
  width: 300px;
}

#col3 {
  background-color: #699;
  width: 200px;
}
<div id="container">
  <div id="rowWraper" class="row">
    <div id="col1" class="col">
      Column 1<br />Lorem ipsum<br />ipsum lorem
    </div>
    <div id="col2" class="col">
      Column 2<br />Eco cologna duo est!
    </div>
    <div id="col3" class="col">
      Column 3
    </div>
  </div>
</div>

テーブルセルの幅の自動拡張に問題がある場合でも、テーブルセルに別のdivを挿入し、固定幅を与えることで簡単に解決できます。とにかく、極端に長い単語（たとえば、600px長い単語を使用する人はいないと思います）または幅がテーブルよりも大きい一部のdivを使用すると、幅の過剰な拡大が発生します-セルの幅。

Faux Column Technique は、この問題の最も一般的な古典的な解決策ですが、列のサイズを変更する場合は、背景のタイル画像のサイズを変更する必要があるなどの欠点がありますまた、エレガントなソリューションでもありません。

OneTrueLayout Technique は、非常に大きな高さのパディングボトムを作成し、負の_を適用して実際の境界位置を「通常の論理位置」にすることで切り取ります。同じ巨大な値のmargin-bottomと、コンテンツラッパーに適用されるoverflow：hiddenでパディングによって作成された範囲を非表示にします。簡単な例は次のとおりです。

作業例：

.wraper {
    overflow: hidden; /* This is important */
}

.floatLeft {
    float: left;
}

.block {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30000px; /* This is important */
    margin-bottom: -30000px; /* This is important */
    width: 33.3333%;
    box-sizing: border-box; /* This is so that the padding right and left does not affect the width */
}

.a {
    background-color: DarkTurquoise;
}

.b {
    background-color: LightSalmon;
}

.c {
    background-color: LightSteelBlue;
}
<html>
<head>
  <title>OneTrueLayout</title>
</head>
<body>
    <div class="wraper">
        <div class="block floatLeft a">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis.</p>
        </div>
        <div class="block floatLeft b">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit. Praesent sed pellentesque lorem. Nam neque ante, egestas ut felis vel, faucibus tincidunt risus. Maecenas egestas diam massa, id rutrum metus lobortis non. Sed quis tellus sed nulla efficitur pharetra. Fusce semper sapien neque. Donec egestas dolor magna, ut efficitur purus porttitor at. Mauris cursus, leo ac porta consectetur, eros quam aliquet erat, condimentum luctus sapien tellus vel ante. Vivamus vestibulum id lacus vel tristique.</p>
        </div>
        <div class="block floatLeft c">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit.</p>
        </div>
    </div>
</body>
</html>

Layering Techniqueは、メインの相対配置ラッパーdivを使用したdivの絶対配置を含む非常にきれいなソリューションでなければなりません。基本的には、多数の子divとメインdivで構成されます。メインdivには、css属性コレクションに対してposition：relativeが必須です。このdivの子はすべてposition：absoluteです。子にはtopおよびbottom_をおよびleft-right次元は、互いに列を収容するように設定されています。たとえば、左側に100ピクセル、200pxが必要であることを考慮して、幅100pxと200pxの2つの列がある場合右側の左側の列には{left：0; right：200px}と右側の列{left：100px; right：0;}が必要です

私の意見では、自動化された高さコンテナ内の実装されていない100％の高さは大きな欠点であり、W3Cはこの属性の修正を検討する必要があります（2018年以降Flexbox and Grid）で解決可能です）。

その他のリソース：link1 、 link2 、 link 、 link4 、 link5（important）

40
andreihondrari

#containerからdisplay:inline-block

#container {
  height: auto;
  width: 100%;
  display: inline-block;
}

#content {
  height: auto;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

#backgroundContainer {
  height: 200px; /*200px is example, change to what you want*/
  width: 100%;
}

参照： W3Schools

9
Michael Antonius

わかりましたので、誰かがこの答えをたたくと思うかもしれませんが、私はjQueryを使用してすべての刺激的な問題を解決しました。 jqueryを使用すると仮定します。

$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());

これはテストされていませんが、ここで概念を見ることができると思います。基本的に、ロード後に高さを取得できます（outerHeightには、パディング+ボーダー、コンテンツのみのinnerHeightが含まれます）。お役に立てば幸いです。

ウィンドウのサイズ変更イベントにバインドする方法は次のとおりです。

$(window).resize(function() {
  $("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});
5
Gabriel

どこかでautoを使用する代わりに、固定の高さを設定する必要があります。コンテンツまたはコンテナ、あるいはその両方に固定の高さを設定すると、その中のものにautoを使用すると動作することがわかります。

また、高さを設定していても、ボックスはより多くのコンテンツで高さ方向に拡張します-そのため、心配しないでください:)

#container {
  height:500px;
  min-height:500px;
}
3
Tim

私はこれに苦労したので、簡単なメモ。

#container {overflow：hidden; } Firefoxでレイアウトの問題が発生し始めたページとIE（ズームが出入りするとき、コンテンツは親divに出入りする）。

この問題の解決策は、ディスプレイを追加することです：インラインブロック。 overflow：hiddenを使用して同じdivに。

1
imos

コンテナでページを埋めたい場合は、height: 100%を設定する必要はありません。おそらく、あなたの問題は、コンテナの子のフロートをクリアしていないという事実に根ざしています。主にoverflow: hiddenをコンテナに追加して、この問題を解決する方法はかなりあります。

#container { overflow: hidden; }

あなたが持っているどんな高さの問題も解決するのに十分でなければなりません。

1
Wex

私は2つのdisplay：tableを作成しました。

#container-tv { /* Tiled background */
    display:table;
    width:100%;
    background-image: url(images/back.jpg);
    background-repeat: repeat;  
}
#container-body-background { /* center column but not 100% width */ 
    display:table;
    margin:0 auto;
    background-image:url(images/middle-back.png);
    background-repeat: repeat-y;

}

これにより、中央に背景画像が列として配置されたタイル背景画像が作成されました。ブラウザウィンドウサイズの100％だけでなく、ページの高さ100％に拡大します。

0
Gregws
{
    height:100vh;
    width:100vw;
}
0
Jangli Coder

スタイル要素から高さを除外してみてください。

つまり、height：100％も他の値も与えません。

0
Vijay