適合div來篩選

Question

我有兩個div：

<div class="header"> 
</div> 
<div class="scroll"> 
</div> 

「報頭」是一個固定的大小（40像素）欄和「滾動」是邊欄，具有滾動條。我想使「滾動」填充「標題」和屏幕底部之間可用的所有高度。但是，如果我在「滾動」上設置了100％或100vh的高度，它會填充高度，但也會增加40px，這不適合屏幕，因此滾動條也出現在瀏覽器上，即使div「滾動」有它自己的滾動條。

Answer 1

如果你想要你可以使用CSS3 calc。

width: calc(100% - 40px); 

但請注意，並非所有瀏覽器都支持此功能。
請參閱http://caniuse.com/calc以查看calc的瀏覽器支持。

Answer 2

這可以通過兩種方式完成。

div { 
width: calc (100% - 40px); 
} 

或

div { 
margin: 40px 0 0 40px; 
} 

這將餘量的頂部和左側。假設那是滾動條所在的位置。如果你想只緣前40 PIX然後做

div { 
    margin-top: 40px; 
    } 

Answer 3

我會給.scroll元素position:absolute;這樣的：Fiddle Demo

HTML

<div class="container"> 
    <div class="header"></div> 
    <div class="scroll"></div> 
</div> 

CSS

.container { 
    background-color:yellow; 
    position:relative; 
    height:500px; 
} 
.header { 
    background-color:red; 
    height:40px; 
} 
.scroll { 
    width:100px; 
    position:absolute; 
    top:40px; 
    bottom:0px; 
    left:0px; 
    background-color:blue; 
}