如何完全禁用div元素的垂直收缩

Question

我的网站上有一个 div，我想保持视口高度，直到 div 变得足够小到子元素开始碰撞的位置（或稍早）。我已经尝试过

min-height

和

display:table;

但都不起作用。它应该是这样的：

但是，在垂直较小的屏幕上，它看起来像这样：

附代码片段：

* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
  color: white;
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 0 auto;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
    position: relative;
    top: 83vh;
    text-align: center;
    background-image: url("img_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 105%;
    padding: 20px;
    padding-right: 20px;
    clear: both;
    overflow: hidden;
}

.info-content-blocks {
    background-color: rgba(204, 204, 204, 0.8);
    padding: 30px; 
    margin: 15px;
}

.diveder {
width: 100%;
min-height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}

<div class="welcome">
    <div class="welcome-content">
        <h1 class="welcome-txt">Classes<br>
            The Coders Club</h1>
        <img src="/resources/Copy of The Coders Club.png" class="logo">
        <p class="tagline">Learn. Code. Create.</p>
        <div class="arrow-background">
            <div class="arrow bounce"></div>
        </div>
    </div>  
</div>
 <div class="space"></div>   
<div class="info-content">
   <div class="diveder" style="color: red;"><h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p></div>
    <div class="info-content-blocks" id="classes">
    
    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>
    
    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programing. Note: The HTML and CSS is not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
</div>

Answer 1

如果我正确理解你的问题，这可能就是你想要做的。首先是将

min-height: 100vh

添加到

.welcome

，然后我们可以对其父级

.welcome

使用 Flexbox 模型，而不是在文本上使用绝对定位。

* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  color: white;
  top: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
  padding: 40px 0;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
  position: relative;
  text-align: center;
  background-image: url("img_5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 105%;
  padding: 20px;
  padding-right: 20px;
  clear: both;
  overflow: hidden;
}

.info-content-blocks {
  background-color: rgba(204, 204, 204, 0.8);
  padding: 30px;
  margin: 15px;
}

.diveder {
  width: 100%;
  min-height: 100px;
  background-color: rgba(204, 204, 204, 0.8);
  padding-top: 2%;
  padding-bottom: 1%;
}

<div class="welcome">
  <div class="welcome-content">
    <h1 class="welcome-txt">Classes<br> The Coders Club</h1>
    <img src="/resources/Copy of The Coders Club.png" class="logo">
    <p class="tagline">Learn. Code. Create.</p>
    <div class="arrow-background">
      <div class="arrow bounce"></div>
    </div>
  </div>
</div>
<div class="space"></div>
<div class="info-content">
  <div class="diveder" style="color: red;">
    <h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p>
  </div>
  <div class="info-content-blocks" id="classes">

    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>

    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programing. Note: The HTML and CSS is not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
  </div>

这里的关键是实际上不使用绝对位置，而是使用 Flexbox 模型，这样它就被视为具有自己的高度。

Answer 2

我发现了一篇有用的文章here，它使用 JS 在

<meta name='viewport' />

上创建最小宽度，如果设备小于该最小宽度，则会呈现更“缩小”的页面版本。

我相信这个解决方案可以解决您的元素碰撞问题。

包含代码的 github 存储库

Answer 3

只需将父级的

min-height

 设置为 

fit-content

，然后根据您的需要，将 

overflow

 设为 

scroll

 或 

hidden

。

* {
    margin: 0;
    padding: 0;
  }

.parent {
    width: 100vw;
    height: 100vh;
    min-height: fit-content;
    display: flex;
    background: lightblue;
    /* overflow: hidden; */
}

.child {
    width: 50%;
    height: 100px;
    text-align: center;
    background: lightcoral;
    border: 1px solid lightgray;
}

.parent :nth-child(3) {
    height: 300px;
}

  

<div class="parent">
  <div class="child">child1</div>
  <div class="child">child2</div>
  <div class="child">child3</div>
</div>

Answer 4

我为此使用了一些js

<script>
let height = screen.height;
document.querySelector(".welcome").style.minHeight=height+"px";
</script>

您可以从 .welcome 中删除最小高度，因为我们使用的是 js

即使是小竖屏，也能完美运行 这是完整的代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  background-repeat: no-repeat;
 
  color: white;
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 0 auto;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
    position: relative;
    top: 83vh;
    text-align: center;
    background-image: url("img_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 105%;
    padding: 20px;
    padding-right: 20px;
    clear: both;
    overflow: hidden;
}

.info-content-blocks {
    background-color: rgba(204, 204, 204, 0.8);
    padding: 30px; 
    margin: 15px;
}

.diveder {
width: 100%;
min-height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}
</style>
</head>
<body>

<div class="welcome">
    <div class="welcome-content">
        <h1 class="welcome-txt">Classes<br>
            The Coders Club</h1>
        <img src="/resources/Copy of The Coders Club.png" class="logo">
        <p class="tagline">Learn. Code. Create.</p>
        <div class="arrow-background">
            <div class="arrow bounce"></div>
        </div>
    </div>  
</div>
 <div class="space"></div>   
<div class="info-content">
   <div class="diveder" style="color: red;"><h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p></div>
    <div class="info-content-blocks" id="classes">
    
    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>
    
    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programing. Note: The HTML and CSS is not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    </div></div>
</body>
<script>
let height = screen.height;
document.querySelector(".welcome").style.minHeight=height+"px";
</script></html>