如何解决设置最小高度等于内容高度
我正在尝试将div
设置为height: 100vh
和max-height: 800px
之间。但是,在较小的屏幕上,我不希望div
缩小到其内容的高度以下。反正没有JS就能做到吗?
.hero {
background-color: lightblue;
padding: 8px;
height: 100vh;
max-height: 800px;
}
body {
margin: 0;
}
<div class="hero">
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit,amet consectetur adipisicing elit. Labore,nostrum nulla illum,laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit,laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
</div>
解决方法
也许我遗漏了一些东西,但这似乎可行:
.hero {
background-color: lightblue;
padding: 8px;
min-height: 100vh; /* mobile-first (small screens) */
}
@media (min-height: 800px) { /* only for screens of height 800 or greater */
.hero {
min-height: 0; /* eliminate the earlier rule */
height: 800px;
}
}
body {
margin: 0;
}
<div class="hero">
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit,amet consectetur adipisicing elit. Labore,nostrum nulla illum,laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit,laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
</div>
,
Flexbox可以在这里为您提供帮助。您只需要一个额外的包装器即可:
.extra {
display:flex;
flex-direction:column;
}
.hero {
background-color: lightblue;
padding: 8px;
flex-basis: 100vh;
max-height: 800px;
box-sizing: border-box;
}
body {
margin: 0;
}
<div class="extra">
<div class="hero">
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit,laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
<p>
Lorem ipsum dolor sit,laborum accusamus veniam sed maxime ratione aliquid facilis rerum maiores ea unde dolore et. Officiis cupiditate veniam odit?
</p>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。