如何使一个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％宽度和高度的容器？

回答

相关问题