我需要你的帮助。我做了一个天气应用程序，它在桌面上看起来还不错，但是当我在手机上测试它时，白框里的内容垂直超出了界限。我尝试了溢出方法，但它没有用，因此将其容器高度定义为 100% 和 100vh，它也没有用吗？有什么解决思路吗？
这是我部署的应用程序: https://sleepy-badlands-75629.herokuapp.com/#
代码如下:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css "href="../stylesheets/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="appBox">
<div class="container">
<header class="text-center">
<h1>Local Weather App</h1>
</header>
<section class="geolocation">
<h1>Today's weather in your location:</h1>
<h2><span id="location"></span></h2>
</section>
<section class="temperature">
<h1>
<span class="tempDisp"></span>
<a id="fahrenheit" class="selected" href="#">℉</a> |
<a id="celsius" href="#">℃</a>
</h1>
</section>
<section class="condition">
<h1><span class="conDisp"></span></h1>
<div class="highLow col">
<p>
<span class="high"></span>°/
<span class="low"></span>°
</p>
</div>
<div class="humidity col">
<p><i class="wi wi-humidity"></i> </p>
</div>
<div class="wind col">
<p>
<i class="wi wi-small-craft-advisory"></i>
<span class="direction"></span><span class="speed"></span>
</p>
</div>
</section>
<section class="forecast">
<h1>5 Day Forecast</h1>
</section>
</div>
</div>
<script type="text/javascript" src="../src/app.js"></script>
</body>
</html>
CSS:
@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 类中，margin: 20px; 将您的 forecast 元素推离较小宽度屏幕的中心。在更大的范围内，它并不那么明显，但是一旦您的房地产缩小，那 20 像素的凸起就会变得更加明显。
我使用开发人员控制台将其重新分配给 margin: auto;，它似乎解决了这个问题。您的元素也应该与此更改保持一致，因为它是嵌套元素。
.forecast {
width: 100%;
margin: auto;
}
这应该可以解决问题!
关于javascript - 防止父div中子项的垂直溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49263724/