在頁面中間進行一些控制以消耗剩餘的Verticle空間的最佳方式是什麼？

目前我解決以下問題的方法是使用JavaScript計算和調整額外空間。有更好的（CSS/HTML）'嗎？在頁面中間進行一些控制以消耗剩餘的Verticle空間的最佳方式是什麼？

我計算已用空間並減去可用空間。然後將控件的高度更改爲該值。很好用，但是有CSS解決方案嗎？

這一切更好地在這裏說明：http://jsfiddle.net/sdh38gxe/4/

<body> 
    <div id="mainDiv"> 
     <div id="divForHeight"> 
      <h1>Some title</h1> 
      <input type="text" placeholder="Some contols" /> 
      <textarea>I want to expand this to have the maximum verticle space without introducing scrollbars</textarea> 
      <input type="text" placeholder="Some more contols" /> 
      <button type="button">Save</button> 
     </div> 
    </div> 
</body>

我意識到，我想答案不是這樣簡單，但我正在尋找的是一些CSS properity如height: consumeMaximumAvailableSpace;或許如果我用div作爲表格？

來源

2015-05-03 user1529413

根據您需要支持的瀏覽器，可以使用稱爲彈性框的CSS佈局功能。根據可用的垂直和水平空間，此佈局可以增大或縮小，並且可以根據您指定的規則重新佈局包含的項目。你可以在這裏看到更多關於彈性盒子的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2015-05-03 21:19:15 ecompton3

不是我所知道的。這是因爲人體百分比寬度基於瀏覽器窗口，但百分比高度基於文檔大小，可能小於或大於瀏覽器窗口。

唯一的解決方案是你採取的，使用js。

來源

2015-05-03 21:25:05

在頁面中間進行一些控制以消耗剩餘的Verticle空間的最佳方式是什麼？

回答

相關問題