调整浏览器窗口大小时如何防止节重叠？

时间：2020-06-06 11:23:48

标签： html css resize overlap sections

情况

一个包含4个部分的滚动页面

问题

    调整大小时，
  1. 标题和关于部分会重叠到下面的部分中 浏览器窗口。
  2. 使用以下工具中的检查器工具设计了移动设备的响应能力后 google chrome，我在线上传项目后遇到问题：

enter image description here

请参阅演示：https://jsfiddle.net/farmcube/8t1sL5p7/10/ 

/** --------------------------------------------------
Author       : xyz
Template Name: abc
Description: boilerplate

Version      : 1.0
* -------------------------------------------------  */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
html {
  width: 100%;
  height: 100%;
  font-family: 'Libre Baskerville', sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Libre Baskerville', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  text-align: left;
  background-color: #fff;
  font-weight: 400;
  color: #6c5353ff;
}


/*-------------------- -----------------------------------------------------------------------------------
 TYPOGRAPHY
-----------------*/

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Libre Baskerville', sans-serif !important;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .5rem;
  color: #6c5353ff;
}


/*-------------------- -----------------------------------------------------------------------------------
Common Styles
-----------------*/

.container {
  padding-top: 100px;
  padding-bottom: 100px
}

section {
  overflow: auto;
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
  vertical-align: middle;
  border-style: none;
}


/*-------------------- -----------------------------------------------------------------------------------
header
-----------------*/

header {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgb(227, 219, 219), rgb(237, 230, 230));
  text-align: center;
  padding: 30px;
}

.logo img {
  text-align: center;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}


/*-------------------- -----------------------------------------------------------------------------------
quote
-----------------*/

.quote {
  width: 100%;
  height: 100%;
  color: #6c5353ff;
  text-align: center;
  font-size: 35px;
  padding: 30px;
}


/*-------------------- -----------------------------------------------------------------------------------
about
-----------------*/

#about {
  width: 100%;
  height: 100%;
  font-family: 'Libre Baskerville', sans-serif !important;
  color: #6c5353ff;
  background-image: linear-gradient(rgb(237, 230, 230), rgb(244, 244, 244));
  padding: 30px;
}

#about .title {
  text-align: center;
  padding: 20px;
}

#about .row {
  padding-top: 100px;
}

#about h1 {
  font-size: 35px;
}

#about p {
  font-size: 30px;
  margin-bottom: 50px;
}

#about img {
  max-width: 100%;
  height: auto;
}


/*-------------------- -----------------------------------------------------------------------------------
contact
-----------------*/

#contact {}

#contact h1 {
  text-align: left;
  font-size: 35px;
  padding-bottom: 50px;
}

.align-center {
  text-align: center;
}

.row {
  margin: -20px 0;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col {
  padding: 0 20px;
  float: left;
  box-sizing: border-box;
}

.row .col.x-50 {
  width: 50%;
}

.row .col.x-100 {
  width: 100%;
}

.content-wrapper {
  min-height: 100%;
  position: relative;
}

.get-in-touch {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.get-in-touch .title {
  text-align: center;
  font-family: Raleway, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 36px;
  line-height: 48px;
  padding-bottom: 48px;
}

.contact-form .form-field {
  position: relative;
  margin: 32px 0;
}

.contact-form .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #6c5353ff;
  font-family: Lusitana, serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}

.contact-form .input-text:focus {
  outline: none;
}

.contact-form .input-text:focus+.label,
.contact-form .input-text.not-empty+.label {
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}

.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-family: 'Libre Baskerville', sans-serif !important;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #888;
  cursor: text;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.contact-form .submit-btn {
  display: inline-block;
  background-color: #6c5353ff;
  color: #fff;
  font-family: 'Libre Baskerville', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.note {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-family: Lusitana, serif;
  font-size: 16px;
  line-height: 21px;
}

.note .link {
  color: #888;
  text-decoration: none;
}

.note .link:hover {
  text-decoration: underline;
}


/*-------------------- -----------------------------------------------------------------------------------
Footer
-----------------*/

#foot p {
  text-align: center;
  font-size: 15px;
  padding-bottom: 1px;
  font-family: 'Libre Baskerville', sans-serif !important;
}


/*-------------------- -----------------------------------------------------------------------------------
responsive
-----------------*/


/* large screen desktop --------------------------------------------------------- */

@media (min-width: 1441px) and (max-width: 2560px) {
  header {
    height: 100vh;
  }
  #about {
    height: 100vh;
  }
}


/* small screen desktop --------------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1440px) {
  header {
    height: 100vh;
  }
  #about {
    height: 100vh;
  }
}


/* large screen tablet --------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {
  header {
    height: 80vh;
  }
  #about {
    height: 80vh;
  }
}


/* small screen tablet --------------------------------------------------------- */

@media only screen and (max-width: 768px) {
  header {
    height: 60vh;
  }
  #about {
    height: 60vh;
  }
  #about .row {
    padding-top: 40px;
  }
  #about h1 {
    font-size: 25px;
  }
  #about p {
    font-size: 20px;
  }
}


/* large screen mobile --------------------------------------------------------- */

@media only screen and (max-width: 425px) {
  header {
    height: 40vh;
  }
  .quote {
    padding: 1px;
  }
  #about {
    height: 110vh;
  }
  #about .title {
    text-align: center;
    padding: 20px;
  }
  #about h1 {
    font-size: 30px;
  }
  #about p {
    font-size: 20px;
    text-align: center;
  }
  #about img {
    height: 200px;
    max-width: 100%;
    height: auto;
  }
  #contact h1 {
    text-align: center;
    font-size: 30px;
    padding-bottom: 50px;
  }
}


/* small screen mobile --------------------------------------------------------- */

@media only screen and (max-width: 320px) {
  #about {
    height: 103vh;
  }
  #about h1 {
    font-size: 25px;
  }
  #about p {
    font-size: 17px;
    text-align: center;
  }
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>At vero eos et accusamus</title>
  <meta name="description" content="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum ">
  <meta name="author" content="Ginjo.io">

  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <style media="screen">

  </style>


</head>

<body>




  <!-- 1) header ---------------------------------------------------------------------------- -->

  <header id="head ">
    <div class="container">
      <div class="logo">
        <img class="img-fluid" src="https://picsum.photos/id/237/200/300" alt="logo infinity projects">
      </div>
    </div>
  </header>




  <!-- 3) quote ---------------------------------------------------------------------------- -->

  <section>
    <div class="container">
      <div class="quote">
        <h4><i>"Vision is the art of seeing what is invisible to others

"</i></h4>
        <h6>- Jonathan Swift -</h6>
      </div>
    </div>
  </section>


  <!-- 2) about ---------------------------------------------------------------------------- -->


  <section id="about">
    <div class="container">

      <div class="title">
        <h1><b>At vero eos et accusamus et iusto odio dignissimos ducimus qui</b></h1> <br>

      </div>

      <hr style="border-color: #ca2c92; height:3px;">

      <br><br>
      <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12 ">
          <div class="copy">
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui <br><br> id est laborum et dolorum fuga.</p>
          </div>

        </div>


        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="">
            <img class="img-fluid" src="https://picsum.photos/seed/picsum/200/300" alt="">
          </div>
        </div>
      </div>



    </div>
  </section>


  <!-- 4) contact ---------------------------------------------------------------------------- -->

  <section id="contact">
    <div class="container">
      <h1 style="color: #6c5353ff" class="title">Contact</h1>
      <br>
      <form class="contact-form row">
        <div class="form-field col-lg-3 col-md-6 col-sm-12 x-50">
          <input id="name" class="input-text js-input" type="text" required>
          <label class="label" for="name">Name</label>
        </div>
        <div class="form-field col-lg-3 col-md-6 col-sm-12 x-50">
          <input id="email" class="input-text js-input" type="email" required>
          <label class="label" for="email">E-mail</label>
        </div>
        <div class="form-field col-lg-3 col-md-6 col-sm-12 x-100">
          <input id="message" class="input-text js-input" type="text" required>
          <label class="label" for="message">Message</label>
        </div>
        <div class="form-field col-lg-3 col-md-6 col-sm-12 x-100 align-center">
          <input class="submit-btn" type="submit" value="send">
        </div>
      </form>
    </div>
  </section>

  <!-- 5) footer ---------------------------------------------------------------------------- -->

  <footer style="background-color: #6c5353ff;" id="foot">

    <div class="container">
      <div class="footer-copy">
        <p style="color: #fff;">blanditiis praesentium voluptatum deleniti </p>
      </div>
    </div>

  </footer>

  <!-- 6) JS ---------------------------------------------------------------------------- -->

  <script src="js/scripts.js"></script>
  <script>
    $('.js-input').keyup(function() {
      if ($(this).val()) {
        $(this).addClass('not-empty');
      } else {
        $(this).removeClass('not-empty');
      }
    });
  </script>
</body>

</html>

我尝试了什么？

  1. 在特定的div，部分，图像和主体上设置高度和宽度， html（什么都不做）
  2. 将高度：更改为最小高度：（不执行任何操作）
  3. 我尝试使用百分比而不是像素（不执行任何操作）
  4. 设置display：block;在部分，div上（什么都不做）
  5. 设置溢出：自动； （不是理想的解决方案）
  6. 我不使用职位：绝对； （被视为常见的重叠问题）
  7. 使用Google chrome中的检查工具设置媒体查询以设计所有设备的响应能力。
  8. 尝试使用Bootstrap网格（什么都不做）

我期望什么？

通过调整浏览器窗口的大小，不会发生重叠。而且布局保持连贯。

理想情况下，我想不使用引导程序来解决此问题。所以我正在寻找一个简单的CSS解决方案。

2 个答案:

答案 0 :(得分：1)

您可以尝试在两个CSS文件中设置#about：height 100％:)。

答案 1 :(得分：1)

如果您正在谈论垂直调整屏幕大小时的重叠，我认为通常会在为元素提供固定高度（例如100％或100vh）时发生。要解决此问题，请为元素（标头，＃about）赋予“最小高度”，而不仅仅是高度。

相关问题
最新问题