73

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

以下は、私の問題を示すマークアップ/スタイルのサンプルです。これをブラウザーにロードすると、#twoと#threeの両方が親の外に出て、#oneスクロールバーが表示されることがわかります。

私の問題はスクロールバーではありませんが、親の全高または幅ではなく、残りの幅または高さを子 div に占有するように子 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>
4

11 に答える 11

25

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

.vscrolling_container { height: 100%; overflow: auto; }
于 2011-04-11T22:18:33.533 に答える
6

これには、一般的に使用される 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

テーブル、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>

于 2016-09-14T17:07:38.033 に答える
4

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

高さはそれほど単純ではありません。同じ高さの列のトリックのようなことができます。

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;}
于 2009-07-08T14:10:56.657 に答える
2

継承を使用できます

#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
于 2009-07-08T14:01:03.813 に答える
1

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

于 2009-07-16T19:55:59.203 に答える
0

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

この例では、width:100%;を削除するだけです。#oneでheight:100%を削除し、#twoでwidth: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%;}
于 2011-02-11T20:13:17.633 に答える