子 div の高さは固定親 div_html/css_WEB-ITnose に適応します

この投稿は linshigong2013 によって 2013-12-25 16:30:31 に最終編集されました

aaaa
aaaa
は動的に変更される div id=aaa 高さと幅は固定です
を実現したいですaaaa
aaaa
div id=bbb の高さと幅の数は自動的に調整されます
余分な div id=bbb div には水平スクロールバーと垂直スクロールバーが表示されます
現在、親にスクロールバーが表示されていますdiv は私が望むものではありません。調整を手伝ってください

<div id="aaa" style="height: 150px;width: 300px;border: 1px solid #b4c9c6;margin: 4px 0 0 3px;background-color: #ffffff;	overflow: auto;">aaaa<br/>aaaa<br/>aaaa<br/>aaaa<br/><div id="bbb" style="SCROLLBAR-FACE-COLOR: #D5DEDB; SCROLLBAR-HIGHLIGHT-COLOR: #e9f5f8; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #deeb9f; SCROLLBAR-ARROW-COLOR: #123456; SCROLLBAR-TRACK-COLOR: #fcfdfd; SCROLLBAR-DARKSHADOW-COLOR: #deeb9f;width:100%;height:100%"><table cellspacing="0" rules="all" border="1" style="border-color:#D8E4F8;width:787px;border-collapse:collapse;">		<tr align="center" style="color:#404040;background-color:#E0E0E0;font-weight:normal;height:28px;">			<th scope="col" style="font-weight:normal;width:180px;"></th><th align="center" scope="col" style="font-weight:normal;"></th><th align="center" scope="col" style="font-weight:normal;width:60px;"><a href="javascript:__doPostBack('dg','Sort$pen03')" style="color:#404040;"></a></th><th align="center" scope="col" style="font-weight:normal;width:140px;"><a href="javascript:__doPostBack('dg','Sort$pen04')" style="color:#404040;"></a></th><th align="center" scope="col" style="font-weight:normal;width:60px;"></th><th align="center" scope="col" style="font-weight:normal;width:140px;"></th>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                 </td><td align="left"></td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                 </td><td align="left"></td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                  </td><td align="left"></td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                 </td><td align="left">              </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                 </td><td align="left">                </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td>		</tr></table></div></div>

ディスカッション (解決策) に返信してください

div id=bbb の高さと幅は自動的に調整されますが、div id= の余分な部分は調整されます。 bbb には水平と垂直のスクロール バーが表示されます。これを実現するのは困難ですよね?欲しいです

しかし、これはハードコーディングされており、aaaa
aaaa
に基づくものではありません。どのくらい変更されましたか?

div id=bbb の高さと幅は自動的に調整されます。 div id=bbb の余分な部分には水平および垂直のスクロール バーが表示されます。これを実現するのは困難です。 aaa の高さを設定し、div id=bbb の高さを変更すると、aaa にスクロール バーが表示されます。 height:70px への % は私が望む効果です

しかし、これはハードコーディングされており、aaaa
aaaa に基づくものではありません

専門家に電話してください。それは可能ですか？

#bbb{height:100%;width:100%;overflow:scroll;}

うわー

上の 2 人の兄弟が HTML コードを実行しました うまくいきませんね

2 人上の兄弟、HTML コードを実行しましたか? 機能しません

テーブルの行の高さと列の幅はパーセンテージで設定する必要があります。そうしないと、テーブルは外部の高さに適応し、内部の要素はそのままになります。もちろん役に立ちません

ごめんなさい、リクエストを誤解していました

リクエストによると、唯一の方法は、jsを使用してaaaa
aaaa
の高さを計算し、必要な値を計算することです。 #bbb の身長

あなたの言っている意味がわからないのはなぜですか?

コードは次のようになります。


結果はあなたが望むものと同じのようです、問題ありません。

同時に、div=bbbの高さを70pxに設定しても同じ効果があると言いました。

ページの初期化時にスクロール バーを表示したくないですか? aaaa
を追加した後、高さを 70px に設定しても、さらにいくつか追加すると、bbb は引き続き実行されます。以下は適応性がある必要があるため、現在の効果の何が問題になっているのでしょうか?

あるいは、あなたがどのような効果を達成したいのかわかりません。

上の兄弟、HTML コードを実行しましたか? 動作しません

Chrome は良いです

どうして言っているのか理解できないのですか?

コードは次のようになります。


結果はあなたが望むものと同じのようです、問題ありません。

同時に、div=bbbの高さを70pxに設定しても同じ効果があると言いました。

ページの初期化時にスクロール バーを表示したくないですか? aaaa
を追加した後、高さを 70px に設定しても、さらにいくつか追加すると、bbb は引き続き実行されます。以下は適応性がある必要があるため、現在の効果の何が問題になっているのでしょうか?

あるいは、あなたがどのような効果を達成したいのかわかりません。

撮ったスクリーンショットは 70px に設定されています。私も試してみました

親要素の高さが決まっている場合、希望する効果を達成することは不可能です

さらにいくつか追加します br /> 。 70pxでも横スクロールバーは表示されません。

そのような効果を主張する場合は、DIV の固定位置を使用してそれをシミュレートし、Yong JS を使用してシミュレートされたスクロール バーを制御します。

しかし、複雑さは非常に高くなります。

高さはハードコーディングすることしかできず、キャプチャした画像は 70px に設定されているようです

希望する効果は、高さが指定されている場合にのみ実現できます。親要素は確実です

もう少し追加してみてください。 70pxでも横スクロールバーは表示されません。

そのような効果を主張する場合は、DIV の固定位置を使用してそれをシミュレートし、Yong JS を使用してシミュレートされたスクロール バーを制御します。

しかし、複雑さは非常に高くなります。

死ぬほど書くこともできません

あなたは言った、aaa
数は不明ですが、さらにいくつか追加するか、70 ピクセルを使用して効果を確認してください。それでも希望する効果とは異なります。今。

これは死ぬほど書くかどうかの問題ではありません。