web-dev-qa-db-ja.com

子divを常に親div内に収める方法は？

私の質問は、JavaScriptを使用せずに、親divのサイズを事前に知ることができないときに、子divをそれらの境界を超えずに親の境界まで拡張する方法があるかどうかです？

以下は、私の問題を示すサンプルのマークアップ/スタイルです。ブラウザにロードすると、#twoおよび#three両方が親の外側に伸びている、#one、およびスクロールバーを表示します。

私の問題はスクロールバーではありませんが、親の完全な高さまたは幅ではなく、残りの幅または高さを子divに占有するように指示する方法がわかりません。

<html>
    <head>
        <style>
            html, body {width:100%;height:100%;margin:0;padding:0;}
            .border {border:1px solid black;}
            .margin { margin:5px;}
            #one {width:100%;height:100%;}
            #two {width:100%;height:50px;}
            #three {width:100px;height:100%;}
        </style>
    </head>
    <body>
        <div id="one" class="border">
            <div id="two" class="border margin"></div>
            <div id="three" class="border margin"></div>
        </div>
    </body>
</html>
htmlcssparent
50
Tim Sheiner

私は同様の問題を抱えていましたが、私の場合、divに高さ方向が親divの境界を超えるコンテンツがあります。その場合、自動スクロールするようにします。私はこれを達成することができました

.vscrolling_container { height: 100%; overflow: auto; }
22
meem

display: inline-block;を使用できます

それが有用であることを願っています。

18
a b

あなたの例では、次のことができません：5px marginがdiv#twoとdiv#threeの境界ボックスに追加され、それらの幅と高さが親+ 5pxの100％になり、オーバーフローします。

親要素でpaddingを使用して、境界内に5pxのスペースがあることを確認できます。

<style>
    html, body {width:100%;height:100%;margin:0;padding:0;}
    .border {border:1px solid black;}
    #one {padding:5px;width:500px;height:300px;}
    #two {width:100%;height:50px;}
    #three {width:100px;height:100%;}
</style>

編集：テストでは、width:100%をdiv#twoから削除すると、divsがブロックレベルであり、デフォルトで常に親の幅を埋めるため、実際に適切に動作します。マージンを使用する場合は、最初のケースをクリアする必要があります。

9
ajm

このために一般的に使用される2つの手法があります。

  1. 絶対位置決め
  2. テーブルスタイル

ここで提供したHTMLは、絶対配置を使用したソリューションです。

body #one {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}
body #two {
  width: auto;  
}
body #three {
  position: absolute;
  top: 60px;
  bottom: 0;
  height: auto;
}
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
        <div id="one" class="border">
                <div id="two" class="border margin"></div>
                <div id="three" class="border margin"></div>
        </div>
</body

一般的な批判にもかかわらず、table、tr、およびtd要素を直接使用するだけで、仕事が完了します。 CSSを使用する場合、colspanに相当するものはないため、ネストされたテーブルになる可能性があります。以下に例を示します。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#one {
  box-sizing: border-box;
  display: table;
  height: 100%;
  overflow: hidden;
  width: 100%;
  border: 1px solid black;
}
#two {
    box-sizing: border-box;
    display: table;
    height: 50px;
    padding: 5px;
    width: 100%;
}
#three {
  box-sizing: border-box;
  display: table;
  height: 100%;
  padding-bottom: 60px;
  padding-left: 5px;
  
}
#four {
  display: table-cell;
  border: 1px solid black;
}
#five {
  display: table-cell;
  width: 100px;
  border: 1px solid black;
}
#six {
  display: table-cell;  
}
<html>
        <div id="one">
            <div id="two">
            <div id="four"></div>
        </div>
        <div id="three">
            <div id="five"></div>
            <div id="six"></div>
        </div>
        </div>
  </html>
5
Ryan

幅を簡単にするために、単にwidth: 100%ルール。デフォルトでは、divは親コンテナに合わせて伸縮します。

高さはそれほど単純ではありません。 equal height column trick のようなことをすることができます。

html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}
4
Matt Bridges

一番外側のdivに次のCSSプロパティがあることを確認してください。

.outer {
  /* ... */
  height: auto;
  overflow: hidden;
  /* ... */
}
2
Jiabei Luo

閉鎖については、この質問に対する答えは解決策がないということだと思います。私が望む動作を得る唯一の方法は、javascriptを使用することです。

2
Tim Sheiner

あなたは継承を使用することができます

#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
1
Silfverstrom

私があなたを正しく理解しているなら、最も簡単な方法は子供を浮かせることです。例えば：

#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: Lime; }

親要素で寸法（高さ/幅）とオーバーフローをautoまたはhiddenに設定すると、浮動子要素が含まれます。

Overflow：hidden;に注意してください。コンテンツが途切れる問題が発生することがあります。その場合は、次の代替方法を試してください。

http://www.positioniseverything.net/easyclearing.html

1
Olly Hodgson

子のdivを親のサイズに合わせたい場合は、少なくとも子のdivの子ボーダーのサイズ以上のマージンを置く必要があります（child.margin >= child.bordersize）。

この例では、width：100％;とheight：100％ in ＃oneを削除し、width ：#twoで100％。次のようになります。

html, body {width:100%; height:100%; margin:0; padding:0;}    
.border {border:1px solid black;}   
.margin {margin:5px;}  
\#one {}   
\#two {height:50px;}    
\#three {width:100px; height:100%;}
0
Wade

プロジェクトでflexboxを使用できると仮定すると、あなたの質問に対する解決策があると思います。やりたいことは、#oneを使用してdisplay: flex a flexboxを作成し、flex-direction: columnを使用して作成することです。列の配置。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.border {
  border: 1px solid black;
}

.margin {
  margin: 5px;
}

#one {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#two {
  height: 50px;
}

#three {
  width: 100px;
  height: 100%;
}
<html>

<head>
</head>

<body>
  <div id="one" class="border">
    <div id="two" class="border margin"></div>
    <div id="three" class="border margin"></div>
  </div>
</body>

</html>
0
ShadyThGod