如何使一個div填充100％寬度和高度的容器？

-1

我正在創建一個文本編輯器，我正在研究我的div的尺寸。不幸的是，它不佔用整個頁面。它的width和height設置爲100%。這裏是CSS：如何使一個div填充100％寬度和高度的容器？

html, body { 
    position:absolute; 
    z-index:1; 
    top:0px; 
    left:0px; 
}

如果你想查看的頁面，你可以看到它here。非常感謝你的幫助。

來源

2015-12-11 Zooza S

不要在初始頁面加載時使用'style'屬性。 – Krii

我會建議你創建一個jsfiddle或至少一個完整的與div的標記和CSS剪接。此外，即時通訊幾乎肯定這已被回答之前。 – Ernesto

它不佔用整個高度的原因是因爲父對象如果您願意，最有可能不是100％。在容器樣式之前放置以下代碼：

html,body{ 
width: 100%; 
height: 100%; 
}

來源

2015-12-11 20:56:02 wizkid

一定要包括在初始宣佈margin: none;和padding: none;爲html和body：

html, body { 
    position:absolute; 
    z-index:1; 
    top:0px; 
    left:0px; 
    margin: none; 
    padding: none; 
}

來源

2015-12-11 16:46:08 Rounin

給一個高度editBox以及它等於從上述元素的高度差。爲html和body元素設置邊距，填充爲0以避免溢出。

#editBox { 
    height: calc(100% - 30px); 
} 

html, body { 
    margin: 0; 
    padding: 0; 
}

來源

2015-12-11 16:46:22

嗯。當我嵌入它時會出現一些溢出...... –

我已經改變了它一點點

html, 
body, 
.container { 
    position: absolute; 
    margin: 0; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 
} 

.header { 
    height: 30px; 
    vertical-align: middle; 
    border: 1px solid black; 
    border-bottom: 0px; 
} 

#editBox { 
    height: calc(100% - 33px); 
    border: 1px solid black; 
    font-family: 'Open Sans'; 
    overflow: scroll; 
} 

img.icon { 
    width: 15px; 
}

這

http://jsfiddle.net/link2twenty/y9esbeLc/

來源

2015-12-11 16:54:18

如何使一個div填充100％寬度和高度的容器？

回答

相關問題