Html 对于任何桌面屏幕大小,容器是否可能占据100%的屏幕高度?
我试图让容器占据桌面屏幕的整个高度 我可以将Html 对于任何桌面屏幕大小,容器是否可能占据100%的屏幕高度?,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图让容器占据桌面屏幕的整个高度 我可以将divs的高度设置为一些像素,并占据合理的高度 但是如果在大屏幕上观看,容器的底部是可见的,这是一个空的空间 我可以让容器占据所有屏幕的完整高度吗?这是您想要的吗 <html> <head> <style> html, body, div { width: 100%; height: 100%;
divs
的高度设置为一些像素,并占据合理的高度
但是如果在大屏幕上观看,容器的底部是可见的,这是一个空的空间
我可以让容器占据所有屏幕的完整高度吗?这是您想要的吗
<html>
<head>
<style>
html, body, div {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
display: block;
}
</style>
</head>
<body>
<div>Full screen size</div>
</body>
</html>
html,body,div{
宽度:100%;
身高:100%;
保证金:0;
填充:0;
}
div{
显示:块;
}
全屏尺寸
我不知道这是否是您需要的:
和HTML:
<div>Hello</div>
你好
是的,您可以确保其位置相对于父元素,并为其所有父元素指定100%的高度。试试这个
html, body{
height:100%;
position:relative;
margin:0;
display:block;
}
.mydiv{
height:100%;
position:relative;
background:red;
display:block;
}
在IE中,如果您没有为所有家长指定100%的高度,则子div可能没有完整高度。您需要的是一个粘性页脚
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
读一读。以下是一个。您可以使用诸如vh
和vw
来定义与视口大小相关的尺寸:
div {
height: 100vh;
}
表示“使div 100%成为视口的高度”
正文{
保证金:0;
}
主要{
宽度:50%;
高度:100vh;
背景色:aliceblue;
}
您是否尝试过高度:自动;对于您正在谈论的div?@WarrenSergent-spakatak.com“样式元素允许作者将样式表规则放在文档的开头。HTML允许在文档的开头部分包含任意数量的样式元素。”您好@Jamie-是-我了解内部样式表的工作原理。你显然不理解样式表——你放了“html,head,div”——这意味着你正在对元素进行样式化,而你不能这样做(好吧,不应该这样做——样式化完全没有作用)。我的问题是为什么你要在css中添加head标记,而不是为什么要在head元素中添加css。显然是个错误。很抱歉,谢谢你的澄清。
div {
height: 100vh;
}