填寫動態div的剩餘高度

-1

如何獲得左側的底部框以填充div的高度的其餘部分，以便邊框向下到框的底部？填寫動態div的剩餘高度

眼下線路停止在左框的內容停止

HTML

<div id="container"> 
     <div id="leftcolumn"> 
      <div id="fixedbox"> 
       Fixed size 
      </div> 
      <div id="restbox"><p>Fill out box</P></div> 
     </div> 
     <div id="rightcolumn"> 

      <p>Dynamic content</p> 

     </div> 
     <br style="clear:both;" /> 
    </div>

CSS

body { 
    background-color:#ccc; 
} 
#container { 
    margin:0 auto; 
    width:80%; 
    background-color: #fff; 

} 
#leftcolumn { 
    width:29%; 
     float:left; 
     border-right:1px solid #000; 

    } 

    #rightcolumn { 
width:68%; 
     float:left; 
     margin-left: 2% 
    } 

    #fixedbox { 

     width:100%; 
     height:200px; 
     border-bottom: 1px solid #000; 
    } 

    #restbox { 
     width:100%; 
    }

http://jsfiddle.net/P6YQc/2/

來源

2014-02-25 user1935580

使用'顯示：表細胞;'是解決 –

在未來，請前問搜索，還有這個話題無數的問題。 – Nit

我已經搜索了很多，但許多解決方案不是用動態內容，而是填充其餘的browserheight。我嘗試過使用表格單元，但無法讓我工作。我會關閉這個問題並再次嘗試。感謝您的反饋意見！ – user1935580

有，爲什麼你不任何理由t在#rightcolumn上有一個左邊框，而不是#leftco上的右邊框lumn？

http://jsfiddle.net/P6YQc/7/

如：

#leftcolumn { 
    width:29%; 
    float:left; 
} 

#rightcolumn { 
    width:68%; 
    float:left; 
    border-left:1px solid #000; 
    padding-left:10px; 
    box-sizing: border-box; 
}

來源

2014-02-25 16:12:39

是的。這是因爲在網站中使用它的地方有一個額外的欄位，內容的長度不會像動態內容那麼長，所以這只是一個例子。 – user1935580

填寫動態div的剩餘高度

回答

相關問題