Html 使内部H3和DIV的DIV跨度高度？

我有一个这样的布局

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

某个标题

字段1：

字段2：

字段3：



字段4：



字段5：


发现

---

。。。然而，外部的

div

仅跨越

h3

的高度，如何使其也跨越内部

div

的高度？

内部的

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>

某个标题

内部的

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>

某个标题

给内底100%的高度

<div class="d-dataGridBodyRow" style="padding: 0px; height:100%">
</div>

---

给内底100%的高度

<div class="d-dataGridBodyRow" style="padding: 0px; height:100%">
</div>

---

如果你在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>

某个标题
你好，世界

如果你在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>

某个标题
你好，世界

给第二个div一个高度，或者在其中放一些内容。目前它没有占用任何空间，因此没有显示任何空间。

为第二个div指定一个高度，或者在其中放置一些内容。目前它没有占用任何空间，因此没有显示任何空间。

最有可能的是，您有一个CSS规则使

.d-dataGridBodyRow

浮动。如果是这种情况，并且您希望外部的

完全包围它，那么一个简单的方法是给它CSS

溢出：隐藏
。如果不可能（您明确希望溢出内容），请尝试。
最有可能的是，您有一个CSS规则使
.d-dataGridBodyRow
浮动。如果是这种情况，并且您希望外部的
完全包围它，那么一个简单的方法是给它CSS
溢出：隐藏
。如果这不可能（您明确希望溢出内容），请尝试。
似乎没问题，您的内部div没有任何内容。此浏览器是否特定？如果您给内部div一些内容，它似乎在FF中工作@弗里伯德，你说得对。让我编辑一下这个问题，看看能否提供更多的信息。我当时不认为其余的内容相关，但我错了。@freebird，请查看我的编辑。看起来很好，你的内部div没有任何内容。这是特定于浏览器的吗？如果您给内部div一些内容，它似乎在FF中工作@弗里伯德，你说得对。让我编辑一下这个问题，看看能否提供更多的信息。我当时不认为其余的内容与此相关，但我错了。@freebird，请查看我的编辑。哦，请刷新浏览器中的问题。我添加了更多的代码。是的，@meustrus似乎推断出发生了什么。下次我发布一个HTML和CSS问题时，我会确保包含运行时CSS样式。哦，只要刷新浏览器就可以了。我添加了更多的代码。是的，@meustrus似乎推断出发生了什么。下一次我发布一个HTML和CSS问题时，我一定会包括运行时CSS样式。这非常好，做得很好。下一次，我将确保在问题中包括运行时应用的CSS。实际上，
.d-dataGridBodyRow
是向左浮动的-外部div上的
溢出：隐藏
工作得很好。我很高兴它为您工作。如果它解决了你的问题，那么别忘了投票/接受！这很好，做得很好。下一次，我将确保在问题中包括运行时应用的CSS。实际上，
.d-dataGridBodyRow
是向左浮动的-外部div上的
溢出：隐藏
工作得很好。我很高兴它为您工作。如果它解决了你的问题，那么别忘了投票/接受！