我想让一个 div 到屏幕的底部。
作为一个解决方案,我想用height:100%;
.
不适合我,我看到人们说解决方案是声明html, body {height=100%;}
.
它仍然对我不起作用,如下面的片段所示。
我尝试过的另一件事是声明height:100vh;
. 但这是不正确的,因为“div1”会导致溢出,我只是想让它填满屏幕。
html, body{
height:100%
margin 0;
}
#div1{
height:80px;
width: 100%;
background-color: red;
display:flex;
justify-content: center;
align-items: center;
}
#div2{
height:100%;
width: 100%;
background-color: green;
}
<div id="div1"> Contenido del div 1 </div>
<div id="div2"> Contenido del div 2. Este div quiero que ocupe hasta el final de la pantalla de manera vertical. </div>
健康!
您可以通过
javascript
, 使用它的属性来做到这一点screen.heigth
,它获取您所在屏幕的总高度并通过变量将其添加到其中。它会是这样的:这将采用显示您的页面或应用程序的任何屏幕的高度
将
display:flex
放入您的身体并添加flex-direction:column
以垂直占用 100% 的长度您在 html,body 选择器中的高度和边距也有语法错误
如下是您期望的结果
看这里的例子
为了达到预期的效果,你可以声明 body
display: flex
并且它占据了屏幕的整个高度,除了告诉它它的地址是一个列flex-direction: column
,你想要占据的其余空间的 div 我们声明flex: 1
它是相当于flex-grow: 1
在您的主容器中添加一个
min-height 100vh
for设为
div
width
100vw,Div
height 设为 100vh(以下是 vw 和 vh 的简要说明)。之后,如果您想应用重置。
如果有什么告诉我的话,添加到课程中
#div2
position: fixed;
应该可以工作。