我有这样的布局......
<div style="width: 99%; border: 1px dotted #0683DA; padding: 8px;">
<h3>Some Header</h3>
<div class="d-dataGridBodyRow" style="padding: 0px">
<table style="vertical-align: top;">
<tr>
<td colspan="4" id="ErrMsg" runat="server">
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 15%;">
<p class="FieldLabel">
Field 1:</p>
</td>
<td>
<asp:TextBox ID="Field1" runat="server"></asp:TextBox>
</td>
<td style="vertical-align: top; width: 15%;">
<p class="FieldLabel">
Field 2:</p>
</td>
<td valign="top">
<asp:TextBox ID="Field2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 15%;">
<p class="FieldLabel">
Field 3:</p>
<br />
<asp:RegularExpressionValidator ID="Field3Validator" runat="server" ControlToValidate="Field3"
ErrorMessage="Some message." ValidationExpression="^\d{16}"
EnableClientScript="true" CssClass="errortext" />
</td>
<td valign="top">
<asp:TextBox ID="Field3" runat="server" MaxLength="16"></asp:TextBox>
</td>
<td style="vertical-align: top; width: 15%;">
<p class="FieldLabel">
Field 4:</p>
<br />
<asp:RegularExpressionValidator ID="Field4Validator" runat="server" ControlToValidate="Field4"
ErrorMessage="Some message."
ValidationExpression="\A[A-HJ-NPR-Z\d]{11}\d{6}\z" EnableClientScript="true"
CssClass="errortext" />
</td>
<td valign="top">
<asp:TextBox ID="Field4" runat="server" MaxLength="17"></asp:TextBox>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 15%;">
<p class="FieldLabel">
Field 5:</p>
<br />
<asp:RegularExpressionValidator ID="Field5Validator" runat="server" ControlToValidate="Field5"
ErrorMessage="Some message."
ValidationExpression="\A[A-HJ-NPR-Z\d]{11}\d{6}\z" EnableClientScript="true"
CssClass="errortext" />
</td>
<td valign="top">
<asp:TextBox ID="Field5" runat="server"></asp:TextBox>
</td>
<td style="vertical-align: top; width: 15%;">
</td>
<td valign="top">
</td>
</tr>
<tr>
<td colspan="4">
<div class="d-formSubmitCont" style="padding-right: 20px;">
<!-- <asp:LinkButton CssClass="b-primaryBtnArrow" ID="Cancel" runat="server"><span>Cancel</span></asp:LinkButton> -->
<asp:LinkButton CssClass="b-primaryBtnArrow" ID="Find" runat="server" OnClick="Find_Click"
CausesValidation="true"><span>Find</span></asp:LinkButton>
</div>
</td>
</tr>
</table>
</div>
</div>
...但是外div
仅跨越h3
的高度,我如何让它跨越内div
的高度?
答案 0 :(得分:1)
内部div
没有内容,这就是它没有占据任何空间的原因。将其更改为:
<div style="width: 99%; border: 1px dotted #0683DA; padding: 8px;">
<h3>Some Header</h3>
<div class="d-dataGridBodyRow" style="padding: 0px">
</div>
</div>
答案 1 :(得分:1)
给内部div增加100%的高度
<div class="d-dataGridBodyRow" style="padding: 0px; height:100%">
</div>
答案 2 :(得分:1)
如果你在div中放置一些东西,那么身高就会拉长。
<div style="width: 99%; border: 1px dotted #0683DA; padding: 8px;">
<h3>Some Header</h3>
<div class="d-dataGridBodyRow" style="padding: 0px">
Hello World
</div>
</div>
答案 3 :(得分:1)
给第二个div一个高度,或者在那里放一些内容。目前它没有占用空间,因此没有显示空间。
答案 4 :(得分:1)
很可能你有一个使.d-dataGridBodyRow
浮动的CSS规则。如果是这种情况,并且您希望外部<div>
完全包含它,则一种简单的方法是为其提供CSS overflow: hidden
。如果这不可能(您明确要求溢出内容),请尝试the standard clearfix。