將元素的高度展開到頁面底部

我在頁面中有一個畫布，我希望它填充頁面直到它到達頁面的底部。將元素的高度展開到頁面底部

我將畫布的寬度設置爲100％，但我無法將高度設置爲100％，因爲它延伸得太遠了。

div的位置不是瀏覽器窗口的0,0，它上面還有其他東西，所以我最終得到一個滾動條，因爲100％的高度遠遠低於瀏覽器輸出的底部。

所以我想知道如何擴展元素的高度，從網頁的當前位置到達頁面的底部？

<style> 
.canvas{ 
    position:absolute; 
    width:100%; 
    height:100%; 
} 
<style> 
<div class="logo">Stuff here</div> 
<div class="output"> 
    <canvas class="canvas"></canvas> 
</div>

我需要使用JavaScript還是有CSS方法來做到這一點？

來源

2015-09-11 Sir

如果你知道畫布上面的內容的高度，你可以使用top和bottom性質採取佔用的空間的其餘部分：

JS Fiddle

.logo { 
    height: 40px; 
} 
.output { 
    position: absolute; 
    top: 40px; // height of above content 
    bottom: 0; 
    width: 100%; 
    padding: 0; 
} 
.canvas { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
}

如果你不知道上述內容的高度，你可以calcula忒它：

JQuery的實施例：JS Fiddle

var height = $('header').height(); 
$('.output').css('top', height);

來源

2015-09-11 02:46:20

所以我必須手動添加了上述所有元素，並把作爲頂部？ – Sir

@Dave是的，或使用JS來計算它。 –

你的小提琴沒有延伸到頁面的正文 – Sir

我以前有過這個問題，在CSS中，創建此規則....

html, body { 
    margin: 0; 
}

來源

2015-09-11 02:41:12 scarecrow850

使具有固定高度的頁眉和頁腳，但流體高度含量可調整大小的彈出窗口時

https://jsfiddle.net/ca5tda6e/

設置頭這種技術也很大（.logo）到固定高度

.logo{ 
    height: 100px; 
    background-color: lightGray; 
    position: relative; 
    z-index: 1; 
}

則定位內容（.OUTPUT）絕對的，用的填充頂：100px的

.output{ 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; /* so that padding is included in width/height */ 
    padding-top: 100px; /* padding-top should be equal to .logo height */ 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */ 
}

來源

2015-09-11 03:00:58

將元素的高度展開到頁面底部

回答

相關問題