如何使第二個div填充屏幕的其餘高度而不使用滾動條？

我有2個div：第一個有100px的高度，第二個我想填充屏幕的其餘部分，沒有垂直滾動條。我試圖將第二個div的高度設置爲100％，但滾動條出現了。如何使第二個div填充屏幕的其餘高度而不使用滾動條？

<html> 
<body> 
    <div class="wihe100"> 
     <div class="firstDiv"> 
      AAA 
     </div> 
     <div class="wihe100 redBack"> 
      BBB 
     </div> 
    </div> 
</body> 
</html> 

html, body 
{ 
    height:100%; 
    margin: 0px; 
} 

.wihe100 
{ 
    width: 100%; 
    height: 100%; 
} 

.redBack 
{ 
    background-color: #FF0000; 
} 

.firstDiv 
{ 
    height: 100px; 
    background-color: #0000FF; 
}

這裏是一個的jsfiddle：http://jsfiddle.net/wHtX7/1/

來源

2014-01-21 kovacs lorand

選項1：給身體本身賦予紅色背景。

html, body{ 
    height:100%; 
    margin: 0px; 
    background-color: #FF0000; 
} 
.firstDiv{ 

    height: 100px; 
    background-color: #0000FF; 
}

DEMO here.

選項2：的redBack 100％設定高度 - 100像素。

HTML：

<div class="wihe100"> 
    <div class="firstDiv">AAA</div> 
    <div class="redBack">BBB</div> 
</div>

CSS：

html, body {  
    margin: 0px; 
} 
html, body,.wihe100 { 
    height:100%; 
} 
.redBack { 
    background-color: #FF0000; 
    height:calc(100% - 100px); 
} 
.firstDiv { 
    height: 100px; 
    background-color: #0000FF; 
}

DEMO here.

來源

2014-01-21 12:03:19 Hiral

選項2在IE8中不起作用（放在單獨的文件之外，它不能在IE8中工作）。雖然沒有要求IE8。 – koral

@koral是'calc'在IE中不起作用。您可以使用選項1. – Hiral

您可以同時包含您的DIV父DIV <div class="wihe100">設置overflow: hidden;。

這裏是一個工作fiddle

來源

2014-01-21 11:57:25 Daew

他已經這樣做了...... – Albzi

哦，對不起，沒注意，我會改正我的答案 – Daew

這樣做的問題是，如果第二個div有很多的內容，那麼不適合在屏幕上的內容不會顯示。 http://jsfiddle.net/wHtX7/12/ –

我想加入

overflow-y:hidden;

您.wihe100類會有所幫助。

來源

2014-01-21 12:01:08 vaskort

這個問題是，如果第二個div有很多內容，那麼不適合在屏幕上顯示的內容。 http://jsfiddle.net/wHtX7/12/ –

好的我明白了，這個怎麼樣？它適合你嗎？在父div中添加高度自動和相對位置，在紅色div中添加高度自動。 http://jsfiddle.net/wHtX7/15/ – vaskort

在Chrome和IE上出現scroolbar –

使用Flexbox的

<html> 
    <body> 
     <div class="wihe100"> 
      <div class="firstDiv"> 
       AAA 
      </div> 
      <div class="wihe100 redBack"> 
       BBB 
      </div> 
     </div> 
    </body> 
</html>

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.wihe100 { 
    display: flex; 
    height: 100vh; 
    flex-direction: column; 
} 

.firstDiv { 
    background-color: red; 
    height: 100px; 
} 

.redBack { 
    background-color: blue; 
    flex: 1; 
}

http://jsfiddle.net/wHtX7/16/

來源

2014-01-21 12:07:49 michael

它不適用於IE10。滾動條出現。 –

您需要爲某些瀏覽器添加供應商前綴 – michael

如何使第二個div填充屏幕的其餘高度而不使用滾動條？

回答

相關問題