设置主人公div的最大和最小高度
设置主人公div的最大和最小高度
提问于 2017-02-08 20:04:20
所以，我正在为一个客户创建一个登录页面，他们想要一个全屏的英雄div，并在背景中播放视频。传统的方法是通过以下方式完成：
div.hero {
position: absolute;
width: 100%;
height: 100%;
}然而，我很笨拙，我需要将这个职位声明为relative。我还想限制高度，这样你就不能将div缩小到640px以下，也不能比800px更多地拉伸它。
下面是我的代码：
div.hero {
position: relative;
width: 100%;
height: 100%;
max-height: 800px;
min-height: 640px;
display: block;
}出现的问题是，长方体的高度不会变为100%，而是会缩放到640px。
我该怎么解决这个问题呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-08 20:12:33
使用100vh而不是100%的高度，它将会工作。
div.hero {
position: relative;
width: 100%;
height: 100vh;
max-height: 800px;
min-height: 640px;
display: block;
background:red;
}<div class="hero"></div>
Stack Overflow用户
发布于 2017-02-08 20:17:47
您可以使用以下命令：
html, body {height:100%; margin:0; }
div.hero {
position: relative;
width: 100%;
height: 100%;
max-height: 800px;
min-height: 640px;
display: block;
background:blue;
}<div class="hero"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42112627
复制相关文章
相似问题
腾讯云开发者
