所以，我遇到了這個問題，當我將背景影像添加到 flexbox 列時，我可以看到底部底部有一個很大的空白區域，我試圖檢查頁面但找不到問題。我不知道該怎么做，也不知道如何解決這個問題，我想做的是洗掉空白或讓圖片一直向下。任何幫助是極大的贊賞。
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(earth.jpg);
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
</body>
</html>由于影像不存在，我有點難以看到，但我也會添加一張圖片：
uj5u.com熱心網友回復：
問題在這里：
.row {
flex: 50%;
padding: 3em; <---- This line
padding-left: 15em;
}
您將在行元素周圍添加額外的填充，包括底部。洗掉此填充后，螢屏底部的空間消失了。
這是一個作業演示：https ://codepen.io/Lissy93/pen/yLvBJLe
提示：我推薦使用開發者工具，你可以使用元素選擇器將滑鼠懸停在空間上，它會準確顯示是哪個元素導致它，并顯示它是（綠色表示）填充和（橙色表示）邊距。
uj5u.com熱心網友回復：
全屏查看此代碼段。紅色虛線邊框是彈性框的限制。圖片下方的空間（根據您的圖片）在別處。
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
border: 5px dashed red;
}
.row {
flex: 50%;
padding: 3em;
/* padding-left: 15em;*/
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://picsum.photos/id/1/200/300);
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security. Experts agree that climate
change threatens to set back development efforts by decades, placing least developed countries and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority of climate change since the 1950s. It predicts global
surface temperature to continue to rise, along with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant transformation in our development patterns. It requires not only a shift in awareness and accountability for our own individual choices but in a social,
political and economic shift towards enabling conditions for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
我沒有看到底部有任何空間。我在linux上使用firefox。
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://via.placeholder.com/200);
background-size: cover;
} <div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467536.html