0

我有这样的布局......

<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？

4

5 回答 5

1

内部div没有内容，这就是它不占用任何空间的原因。将其更改为：

<div style="width: 99%; border: 1px dotted #0683DA; padding: 8px;">
    <h3>Some Header</h3>
    <div class="d-dataGridBodyRow" style="padding: 0px">&nbsp;
    </div>
</div>
于 2012-11-01T12:53:33.307 回答
1

给内部 div 100% 的高度

<div class="d-dataGridBodyRow" style="padding: 0px; height:100%">
</div>
于 2012-11-01T12:53:49.483 回答
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>
于 2012-11-01T12:54:06.923 回答
1

给第二个 div 一个高度，或者在里面放一些内容。目前它不占用空间，因此为什么不显示空间。

于 2012-11-01T12:54:11.527 回答
1

很可能您有一个使.d-dataGridBodyRow浮动的 CSS 规则。如果是这种情况，并且您希望外部<div>完全包围它，一个简单的方法是给它 CSS overflow: hidden。如果那是不可能的（你明确地想要溢出内容）试试标准的 clearfix。

于 2012-11-01T12:56:35.207 回答