讓DIV跨越H3和DIV的內部高度？

我有一個像這樣的佈局......讓DIV跨越H3和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>

...但是外div只有跨越h3的高度，我怎麼得到它跨越內div以及高度？

來源

2012-11-01 Mike Perrenoud

http://jsfiddle.net/cqXPZ/看起來很好，你的內部div沒有任何東西。 – freebird

這個瀏覽器是否特定？如果你給內部div一些內容，它似乎在FF中工作。 http://jsfiddle.net/8z3y5/ –

@freebird，你是對的。讓我編輯這個問題，看看我能否提供更多信息。我認爲目前其餘的都不相關，但我錯了。 –

最有可能你有一個CSS規則，使.d-dataGridBodyRow浮動。如果是這種情況，並且您希望外部的<div>完全包含它，一個簡單的方法是給它CSS overflow: hidden。如果這是不可能的（你明確想要溢出內容），請嘗試the standard clearfix。

來源

2012-11-01 12:56:35 meustrus

這工作完美，工作出色。下次我會確保在問題中包含運行時**應用** CSS。 '.d-dataGridBodyRow'實際上是左浮動 - 外部div上的'overflow：hidden'完美工作。 –

我很高興它爲你工作。如果它解決了你的問題，那麼不要忘記上/接受！ – meustrus

內部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-01 12:53:33

請看我的編輯，對於給您帶來的不便表示歉意。 –

哦，只需刷新瀏覽器的問題。我添加了更多的代碼。 –

@BigM您分享的新代碼正在爲我工作。 http://jsfiddle.net/uumwj/ –

100％的高度給內部的div

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

來源

2012-11-01 12:53:49 Adil

請看我的編輯，對於給您帶來的不便表示歉意。 –

如果你把你的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-01 12:54:06 George

請看我的編輯，對於給您帶來的不便表示歉意。 –

給第二個div一個高度，或者把一些內容放在那裏。目前它不佔用空間，因此爲什麼不顯示空間。

來源

2012-11-01 12:54:11 Diginari

請看我的編輯，對於給您帶來的不便表示歉意。 –

讓DIV跨越H3和DIV的內部高度？

回答

相關問題