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

hgtggwj0 于 2022-12-24 发布在其他

关注(0)|答案(4)|浏览(202)

我在我的网站上有一个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>

css

来源：https://stackoverflow.com/questions/74838099/how-to-completely-disable-vertical-shrinking-of-a-div-element

4条答案

按热度按时间

4dbbbstv1#

如果我没理解错的话，这可能就是你想要做的，首先将min-height: 100vh添加到.welcome，然后我们可以使用flexbox模型到其父.welcome，而不是在文本上使用绝对定位。

* {
  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>

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

赞(0）回复(0）举报 2022-12-24

nfs0ujit2#

我遇到了一篇有用的文章here，它使用JS在<meta name='viewport' />上创建一个最小宽度，如果设备小于该最小宽度，它会呈现一个更“缩小”的页面版本。
我相信这个解决方案可以解决元素碰撞的问题。
带有代码的github repo

赞(0）回复(0）举报 2022-12-24

a5g8bdjr3#

只需将父节点的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>

赞(0）回复(0）举报 2022-12-24

jk9hmnmh4#

我正在使用一些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>

赞(0）回复(0）举报 2022-12-24

我来回答

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

4条答案

相关问题

热门标签

最新问答