Question

我有右侧空白区域的问题。看起来像宽度的问题，我试图修复html和body上的max-width问题，但没有任何反应。

P.S。这不是页面每个部分都显示的完整代码空间。

＆＃13;

from airflow.operators import PostgresOperator
form airflow.hooks import S3Hook

s3 = S3hook(aws_conn_id="s3_conn_id_in_airflow_ui_man") 
redshift_load_task = PostgresOperator("""
copy my_table 
FROM '{{ params.source }}' 
ACCESS_KEY_ID '{{ params.access_key}}' 
SECRET_ACCESS_KEY '{{ params.secret_key }}' 
REGION 'eu-west-1' 
ACCEPTINVCHARS 
IGNOREHEADER 1 
FILLRECORD 
CSV
BLANKSASNULL 
EMPTYASNULL 
MAXERROR 100 
DATEFORMAT 'MM/DD/YYYY'
""",
postgres_conn_id="redshift_conn_id_in_airflow_ui_man",
database="uh_you_tell_me",
params={
    'source': 's3://my_bucket/my_file.csv',
    'access_key': s3.get_credentials().access_key,
    'secret_key': s3.get_credentials().secret_key,
},
)

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  background-image: url("img/masaze.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#navbar-list {
  list-style-type: none;
  text-align: center;
  margin: 0;
  overflow: hidden;
  background-color: #000;
  width: 100%;
  opacity: 0.9;
  position: fixed;
}

#navbar-list li {
  text-align: justify;
  display: inline;
}

#navbar-list li a {
  color: white;
  text-decoration: none;
  display: inline-block;
}

#navbar-list li a:hover {
  color: #a0c2d5;
  transition: .5s;
}

.pocetna {
  font-size: 1.7rem;
  padding: 25px 20px;
  float: left;
}

.linkovi {
  padding: 35px 20px;
  position: relative;
  right: 180px;
}

.linkovi:active {
  color: black;
  background-color: white;
}

#main {
  text-align: center;
  padding-top: 15%;
}

#main h1 {
  font-size: 4.5em;
  text-shadow: 1px 1px 1px #000000;
}

#main h3 {
  font-size: 17pt;
}

hr {
  width: 615px;
}

.button {
  height: 50px;
  font-size: 20px;
  margin-top: 20px;
  cursor: pointer;
  padding: 10px;
  outline: none;
  text-decoration: none;
  border: none;
  border-radius: 3%;
}

.button a {
  color: black;
  text-decoration: none;
}

.button:hover {
  background-color: #a0c2d5;
  transition: .5s;
}

section {
  position: relative;
}

#video {
  background-color: rgba(20, 25, 25, 0.5);
  min-width: 100%;
  min-height: 100%;
  margin-top: 590px;
  z-index: 0;
  position: relative;
}

#section1 {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  bottom: -5px;
  left: 0;
}

＆＃13;

Answer 1

尝试在CSS中将overflow-x: hidden;添加到body中，如下所示：

html, body{
margin:0;
padding:0;
font-family: 'IBM Plex Sans Condensed', sans-serif;
background-image:url("img/masaze.jpg");
background-repeat:no-repeat;
background-size:cover;
height:100%;
width:100%;
overflow-x: hidden; 
}

Answer 2

使用此代码。

*, *::before, *::after {
    box-sizing: border-box;
}

你得到卷轴因为宽度：100％; ＆安培;填充。填充值得到外部空间所以宽度：100％+填充= 100％+ 您可以看到该链接以获取更多信息。 https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 3

#section1 {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;<--here
    bottom: -5px;
    left: 0;
}

简而言之，它包括测量高度时的填充。

如何删除右侧的空间？

3 个答案: