Question

我无法弄清楚为什么当我调整窗口大小时，文本会从其容器（mainImage）中被推下来。我想要它做的基本上只是将背景图像保持在屏幕上并将文本滚动到它上面。我一直google搜索无济于事，我很沮丧，我只能以自己的方式提问。如果已经在其他地方解释过这个问题，我很抱歉，但我找不到它。如果有人可以为我阐明这个问题，我会非常感激。

＆＃13;

html{
  width: 100%;
  height: 100%;
}

body{
  margin: 0;
  width: 100%;
  height: 100%;
  /* border: 1px solid red; */
}

#name{
  position: relative;
  z-index: 2;
  left: 10%;
  /* border: 1px solid white; */
  width: 270px;
  font-size: 50px;
  color: white;

}

#nav{
  top: 7%;
  width: 100%;
  position: absolute;
  z-index: 2;
  /* border: 1px solid red; */
}

ul{
  margin-right: 10%;
  float: right;
  padding: 0;
  /* border: 1px solid red; */
  overflow: hidden;
}

li{
  float: left;
  list-style: none;
  font-size: 2em;
  padding: 10px;
  color: white;
}


#cover{
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
  /* background: linear-gradient(to right, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.0)); */
}

#mainImage{
  width: 100%;
  height: 100%;
  background-image: url('IMG_0063.jpg');
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/*
#footer{
  height: 20%;
  width: 100%;
  background-color: #0d0d0d;
} */

h3{
  position: relative;
  top: 40%;
  color: white;
  /* border: 1px solid green; */
  text-align: center;
  font-family: 'Cabin', sans-serif;
}

p{
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 3;
  top: 50%;
  color: white;
  text-align: left;
  font-size: 1.5em;
  font-family: 'Lato', sans-serif;
  line-height: 40px;
  border-top: 1px solid white;
  width: 70%;
}


@media screen and (max-width: 930px) {
  #nav{
    top: 15%;
    /* border: 1px solid yellow; */
    text-align: center;
  }

  #name{
    left: 0;
    margin: 0 auto;
  }

  ul{
    display: inline-block;
    margin-right: 0;
    float: none;
    /* border: 1px solid red; */
  }

}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="index.css">
      <link href="https://fonts.googleapis.com/css?family=Cabin|Arvo|Lato" rel="stylesheet">
    <title></title>
  </head>
  <body>
    <div id="nav">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Gallery</li>
        <li>Contact</li>
      </ul>
    </div>
    <div id="cover"></div>
    <div id="mainImage">
      <div id="name">Name</div>
      <h3>Welcome</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing
         elit, sed do eiusmod tempor incididunt ut labore et dolore magna
         aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
         sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <!-- <div id="footer"></div> -->





  </body>
</html>

＆＃13;

Answer 1

问题是，height及以上的所有内容都有100% #mainImage height: 100%。虽然这（理论上）会导致这些元素占据整个页面，但问题是您拥有的内容多于单个页面上显示的内容，从而导致滚动。

假设您想要滚动内容，并且只想确保背景和文字可见，您需要做的就是从#mainImage移除<p> 。这会将position: absolute代码向上移动页面。要解决此问题，您需要为他们提供left和15% (100% - 70%) / 2)（background）。

这将修复桌面视图的所有内容，但仍会在移动视图上展开灰色背景。您要纠正的最后一件事是将所有#mainImage规则从#cover和body转移到opacity。请注意，opacity现在会影响文字，因此如果您想要灰色背景，则应指定而不是使用html { width: 100%; height: 100%; } body { margin: 0; width: 100%; height: 100%; /* border: 1px solid red; */ background-color: grey; background-image: url('IMG_0063.jpg'); background-attachment: fixed; background-size: 100% 100%; background-repeat: no-repeat; z-index: 1; /* background: linear-gradient(to right, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.0)); */ /*opacity: 0.5;*/ } #name { position: relative; z-index: 2; left: 10%; /* border: 1px solid white; */ width: 270px; font-size: 50px; color: white; } #nav { top: 7%; width: 100%; position: absolute; z-index: 2; /* border: 1px solid red; */ } ul { margin-right: 10%; float: right; padding: 0; /* border: 1px solid red; */ overflow: hidden; } li { float: left; list-style: none; font-size: 2em; padding: 10px; color: white; } #cover { margin: 0; position: absolute; width: 100%; height: 100%; } #mainImage { width: 100%; /*height: 100%;*/ } /* #footer{ height: 20%; width: 100%; background-color: #0d0d0d; } */ h3 { position: relative; top: 40%; color: white; /* border: 1px solid green; */ text-align: center; font-family: 'Cabin', sans-serif; } p { margin: 0 auto; padding: 0; position: absolute; z-index: 3; top: 50%; left: 15%; color: white; text-align: left; font-size: 1.5em; font-family: 'Lato', sans-serif; line-height: 40px; border-top: 1px solid white; width: 70%; } @media screen and (max-width: 930px) { #nav { top: 15%; /* border: 1px solid yellow; */ text-align: center; } #name { left: 0; margin: 0 auto; } ul { display: inline-block; margin-right: 0; float: none; /* border: 1px solid red; */ } }。

以下都可以看到：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="index.css">
  <link href="https://fonts.googleapis.com/css?family=Cabin|Arvo|Lato" rel="stylesheet">
  <title></title>
</head>

<body>
  <div id="nav">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Gallery</li>
      <li>Contact</li>
    </ul>
  </div>
  <div id="cover"></div>
  <div id="mainImage">
    <div id="name">Name</div>
    <h3>Welcome</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <!-- <div id="footer"></div> -->
</body>

</html>

import threading

my_data = '''chr\tpos\tidx\tvals
2\t23\t4\tabcd
2\t25\t7\tatg
2\t29\t8\tct
2\t35\t1\txylfz
3\t37\t2\tmnost
3\t39\t3\tpqr
3\t41\t6\trtuv
3\t45\t5\tlfghef
3\t39\t3\tpqr
3\t41\t6\trtu
3\t45\t5\tlfggg
4\t25\t3\tpqrp
4\t32\t6\trtu
4\t38\t5\tlfgh
4\t51\t3\tpqr
4\t57\t6\trtus
'''


def manipulate_lines(vals):
    vals_len = len(vals[3])
    return write_to_file(vals[0:3], vals_len)

def write_to_file(a, b):
    print(a,b)
    to_file = open('write_multiprocessData.txt', 'a')
    to_file.write('\t'.join(['\t'.join(a), str(b), '\n']))
    to_file.close()

def main():
    to_file = open('write_multiprocessData.txt', 'w')
    to_file.write('\t'.join(['chr', 'pos', 'idx', 'vals', '\n']))
    to_file.close()

    data = my_data.rstrip('\n').split('\n')

    for lines in data:
        if not lines.startswith('chr'):
            lines = lines.split('\t')
        threading.Thread(target = manipulate_lines, args = (lines)).start()


if __name__ == '__main__':
    main()

希望这有帮助！

调整大小时文本会被推下并被推出容器。为什么会这样？

1 个答案: