Javascript 防止父div中的子级垂直溢出

我需要你的帮助。我制作了一个天气应用程序，它在桌面上看起来还不错，但当我在手机上测试它时，白色盒子里的内容在垂直方向上超出了范围。我尝试过溢出方法，但它不起作用，因此将容器高度定义为100%和100vh，它也不起作用？有什么解决办法吗

以下是我部署的应用程序：

代码如下：

HTML:

---

既然您的问题是内容超出了范围，为什么不将内容大小设置为相对大小或使用css媒体查询呢

您可以使用

vh

设置内容相对于视口高度的大小

---

您还可以使用

@媒体屏幕和（最大宽度：480px）

之类的工具来确定设备是否足够小，从而导致内容超出范围，然后在此处为内容写入新的大小。

在您的

类中，预测
边距：20px正在将您的
预测
元素推离较小宽度屏幕的中心。在更大的范围内，它并没有那么明显，但一旦你的房地产缩水，20像素的起伏会变得更加明显

我使用开发者控制台将其重新分配到
margin:auto并且它似乎纠正了问题。您的元素也应该与此更改保持良好的中心关系，因为它是嵌套元素

.forecast {
width: 100%;
margin: auto;
}

那就应该成功了

@import url('https://fonts.googleapis.com/css?family=Raleway:400,800');

*{
  box-sizing: border-box;
}

body{
  width: 100%;
  height: 100vh;
  /* overflow:hidden; */
  font-family: raleway;
  text-align: center;
  background: no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.appBox{
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 8px 8px 0 8px;
  background: rgba(255,255,255,0.2);
}

.container{
  width: 80%;
  margin: 0 auto;
}

a{
  text-decoration: none;
  transition: all 1s;
  color: black;
}

a:hover{
  color: purple;
}

.selected{
  color: blue;
  cursor: default;
  pointer-events:none;
}


header h1{
  text-align: center;
}

.temperature{
  font-size: 2em;
}

.condition p{
  font-size: 1.3em;
}

.col{
  font-size: 1em;
  display: inline-block;
  width:20%;
  /* margin: 5px; */
  /* padding: 10px; */
  border: 1px solid black;
  border-radius: 10px;
  background: rgba(250,250,250, 0.3);
  -webkit-box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
}

.forecast{
  width:100%;
  margin: 20px;
}

.forecast h1{
  background: rgba(255,255,255,0.3);
  border: 1px solid white;
  margin-bottom: 0;
}
.fcol{
  display: inline-block;
  width:20%;
  background: rgba(255,255,255,0.3);
  border: 1px solid white;
}

@media(max-width:700px){
  /* .appBox{
    height: 100vh;
  } */
  .col{
    /* display:block; */
    width: 35%;
    margin: 10px auto;
  }
}

.forecast {
width: 100%;
margin: auto;
}