2012-11-09 224 views
0

我的問題是,嵌套div('內容')不適應他的高度以下的真實內容,在這種情況下,我的形式。所以前者的div適應了他的身高,但後者的div並沒有這樣做。我該如何解決這個問題?適應嵌套的div以下內容

HTML:

<div id='container'> 
    <div class='content'> 
     <form action="#" id="admin_form"> 
      <input type="text" class="input350" name="status" /> 
      <input type="text" class="input350" name="tlt" /> 
      <br> 
      <input type="text" class="input350" name="msg" /> 
      <input type="submit" class="input350" style="float:left;" value="Admin" /> 
     </form> 
    </div> 
</div> 

CSS:

#container 
    { 
     position: absolute; 
     width: 900px; 
     height: auto; 
     border:solid 4px #1FC3D2; 

    } 

#container .content 
    { 
     position: relative; 
     background-color: #EFEFEF; 
     width: 898px; 
     height:auto; 
     border:solid 1px #000; 
    } 
+1

高度根據在它的內容施加。 – Sowmya

+0

高度默認爲自動;你不需要明確地定義它(你自己)。按照提供的答案。考慮你的提交按鈕的風格是浮動的。只是刪除它,並得到解決,因爲你在'input350'沒有做錯什麼,我們在這裏看不到 – Sami

回答

3

窗體的最後一個輸入是浮動的。浮動元素不會拉伸父母的身高。

形式在此之後添加到:

<div style="clear:both;"></div> 
+0

謝謝。它現在有效。 – Hoper

0

從提交按鈕刪除float:left並添加此CSS

input[type="submit"]{ 
display:block 
} 

DEMO

+0

感謝您的意見。 – Hoper