我需要填充剩餘的垂直空間的#wrapper根據#first與#second div。填充剩餘的垂直空間 - 僅限CSS

我需要一個唯一的CSS解決方案。

HTML：

<div id="wrapper"> 
    <div id="first"></div> 
    <div id="second"></div> 
</div>

CSS：

#wrapper 
{ 
    width:300px; 
    height:100%; 
} 

#first 
{ 
    width:300px; 
    height:200px; 
    background-color:#F5DEB3; 
} 

#second 
{ 
    width:300px; 
    height:100%; //<-----This should fill the remaining space 
    background-color:#9ACD32; 
}

來源

2014-04-30 Abdul Jabbar Dumrai

@Pete不，它們是動態的。只有第一個div是固定的200px高度。而第二個div將填充包裝的剩餘高度 –

你想要這個嗎？ http://jsfiddle.net/K5n4U/ – laaposto

@laaposto不，這不是事情。包裝應100％填充屏幕的整個垂直高度。 –

您可以position:absolute;在#second DIV這樣做：

FIDDLE

CSS：

#wrapper{ 
    position:relative; 
} 

#second { 
    position:absolute; 
    top:200px; 
    bottom:0; 
    left:0; 
    width:300px; 
    background-color:#9ACD32; 
}

編輯：另一種解決方案

根據您的佈局和您在這些div有內容，你可以使它更簡單，與像更小的標記此：

FIDDLE

HTML：

<div id="wrapper"> 
    <div id="first"></div> 
</div>

CSS：

#wrapper { 
    height:100%; 
    width:300px; 
    background-color:#9ACD32; 
} 
#first { 
    background-color:#F5DEB3; 
    height: 200px; 
}

來源

2014-04-30 13:17:49

不是，它不填充包裝的剩餘空間。如果你想減少包裝的高度，你可以看到它沒有填充它。 –

@AbdulJabbarWebBestow只需將'position：relative;'添加到'＃wrapper'像這個http://jsfiddle.net/webtiki/Cb5bu/，div將填充包裝的剩餘空間。 –

優秀的作品。謝謝親愛的Web-Tiki –

如果你可以添加一個額外幾個div所以你的HTML看起來像這樣：

<div id="wrapper"> 
    <div id="first" class="row"> 
     <div class="cell"></div> 
    </div> 
    <div id="second" class="row"> 
     <div class="cell"></div> 
    </div> 
</div>

你可以利用display:table屬性：

#wrapper 
{ 
    width:300px; 
    height:100%; 
    display:table; 
} 

.row 
{ 
    display:table-row; 
} 

.cell 
{ 
    display:table-cell; 
} 

#first .cell 
{ 
    height:200px; 
    background-color:#F5DEB3; 
} 

#second .cell 
{ 
    background-color:#9ACD32; 
}

Example

來源

2014-04-30 13:20:59 Pete

究竟是這樣，但它是跨瀏覽器？ –

@AbdulJabbarWebBestow它應該在IE8的所有瀏覽器中工作 - http://caniuse.com/css-table – Pete

您可以使用CSS Flexbox的，而不是另一個顯示值，該Flexbox的佈局（軟盒）模塊旨在提供一個更有效的方式來佈置，調整和容器中的項目之間分配空間即使它們的尺寸未知和/或動態。

例

/* CONTAINER */ 
#wrapper 
{ 
    width:300px; 
    height:300px; 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Chrome */ 
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
    -ms-flex-direction: column; 
    -moz-flex-direction: column; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
} 

/* SOME ITEM CHILD ELEMENTS */ 
#first 
{ 
    width:300px; 
    height: 200px; 
    background-color:#F5DEB3; 

} 

#second 
{ 
    width:300px; 
    background-color: #9ACD32; 
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ 
    -moz-box-flex: 1; /* OLD - Firefox 19- */ 
    -webkit-flex: 1; /* Chrome */ 
    -ms-flex: 1; /* IE 10 */ 
    flex: 1; /* NEW, */ 
}

jsfiddle Example

如果你想爲舊瀏覽器，如IE9或更低的全力支持，你將不得不使用一個polyfills像flexy，這種填充工具啓用Flexbox的支持型號，但只適用於2012年的flexbox型號。

最近，我發現了另一個填充工具，以幫助您使用Internet Explorer 8 & 9或不具備Flexbox的模型支持任何舊的瀏覽器，我還沒有嘗試過，但我離開的鏈接here

你可以找到一個有用和complete Guide to Flexbox model克里斯Coyer here

來源

2014-04-30 13:25:55 xzegga

我試過這個，但它不能在IE –

Flexbox模型只支持更高版本的IE10。如果你可以部分支持IE的老版本，你需要使用像flexie這樣的polyfill – xzegga

它可以在IE10上運行嗎？ caniuse.com建議不要，但不幸的是，我必須在一段時間內支持它。（發現正確的答案是'排序'：https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx） –

所有你需要的是一些改進的標記。在第一個內包裝第二個，它將渲染下。

<div id="wrapper"> 
    <div id="first"> 
     Here comes the first content 
     <div id="second">I will render below the first content</div> 
    </div> 
</div>

Demo

來源

2014-04-30 13:32:21 JimmyRare

不工作，你可以使它與一些顏色和盒子？ –

當然，我已經更新了一些CSS來進一步解釋它。 – JimmyRare

吉米包裝只是實際上隱藏溢出的內容，第二個div不填充剩餘空間。你可以通過在其中添加更多內容來看 –

-5

你需要JavaScript和一些客戶端計算：http://jsfiddle.net/omegaiori/NERE8/2/

你需要jQuery來有效地實現你想要什麼。這個功能很簡單，但非常有效：

(function() { 


    var heights = $("#wrapper").outerHeight(true); 
    var outerHeights = $("#first").outerHeight(true); 
    jQuery('#second').css('height', (heights - outerHeights) + "px"); 

})();

第一檢測包裝高度，它被設置爲100％，這是不同的，每次（這取決於你在什麼登陸畫面）。在第二步中，它給出#second div合適的高度，從包裝紙高度減去#first div高度。結果是包裝盒中剩餘的可用高度

來源

2014-04-30 13:42:40 valerio0999

我已經提到純PES CSS而不是JavaScript –

然後，我想你看到其他答案，他們已經解決了它純粹的CSS –

問題是如何使用唯一的CSS。只有真的不可能，這纔是有效的答案。 – DavidC

如果您不想爲主容器（頂部，底部，...）設置修復高度，則可以簡單地使用此css-file來獲得使用剩餘空間的柔性容器。加工！！！滾動條

Fiddler

<!DOCTYPE html> 
<html > 
<head> 
    <title>Flex Container</title> 
    <link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css"> 

    <style> 
    .cont{ 
     background-color: blue; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
    } 

    .headerContainer { 
     background-color: green; 
     height: 100px; 
     width: 100%; 
    } 

    .mainContainer { 
     background-color: white; 
     width: 100%; 
     overflow: scroll 
    } 

    .footerContainer { 
     background-color: gray; 
     height: 100px; 
     width: 100%; 
    } 
    </style> 


    </head> 

<body class="qx-flex-ready" style="height: 100%"> 
    <div class="qx-vbox cont"> 
    <div class="headerContainer">Cell 1: flex1</div> 
    <div class="mainContainer qx-flex3"> 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 

    </div> 
    <div class="footerContainer" >Cell 3: flex1</div> 
    </div> 
</body> 
</html>

來源

2015-07-30 13:04:34

-2

你可以只添加溢出：汽車選項：

#second 
{ 
    width:300px; 
    height:100%; 
    overflow: auto; 
    background-color:#9ACD32; 
}

來源

2016-06-25 08:25:02

Flexbox的解決方案

注：如果需要，通過添加柔性供應商前綴您supported browsers。

html, body { 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 300px; 
 
    height: 100%; 
 
} 
 

 
.first { 
 
    height: 50px; 
 
} 
 

 
.second { 
 
    flex-grow: 1; 
 
}

<div class="wrapper"> 
 
    <div class="first" style="background:#b2efd8">First</div> 
 
    <div class="second" style="background:#80c7cd">Second</div> 
 
</div>

來源

2016-11-06 04:02:24

該解決方案提供瞭如此多的便利。泰 – user2465134

你試圖改變包裝高度VH代替％？

#wrapper { 
width:300px; 
height:100vh; 
}

這對我來說，當我想填補我的頁面，例如一個漸變背景偉大的工作......

來源

2017-02-09 11:02:14

填充剩餘的垂直空間 - 僅限CSS

回答

Flexbox的解決方案

相關問題