Question

您好，我正在制作基本的投资组合https://codepen.io/anon/pen/GbVwje页面，但在使用div时遇到了麻烦。目前，下层div（我的工作）正在渗入上层div（标题）。我如何才能在不浪费出血的情况下将标头堆叠在工作之上？我一直在尝试所有事情，但无法弄清为什么会发生。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: "Roboto Cn", sans-serif;
}

/* body */
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

header {
  background: white;
  background-size: cover;
  height: 80vh;
  width: 100%;
}

/* nav bar */
#logo {
  margin: 0;
}

nav {
  margin: 0;
  padding: 20px 55px 0 55px;
  overflow: hidden;
}
nav img {
  float: left;
  padding-left: 15px;
  height: 40px;
  width: 51px;
}
nav ul {
  float: right;
}
nav li {
  display: inline-block;
  padding: 15px;
}
nav a {
  text-decoration: none;
  color: black;
}

#about {
  background: white;
  text-align: center;
  padding: 200px 200px 0 200px;
  font-size: 1.25rem;
}

#work {
  background: blue;
  text-align: center;
}

 <body>
    <header>
      <nav>
        <div id="logo"><img src="/images/logo.png" /></div>
        <ul>
          <li><a href="#">about</a></li>
          <li><a href="#">work</a></li>
          <li><a href="#">contact</a></li>
        </ul>
      </nav>
      <p id="about">
        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>
    </header>
    <section id="work">
      <h1>My Work</h1>
      <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </section>
    <div id="contact">
      <h1>Contact</h1>
    </div>
    <footer>
      <h1>Footer</h1>
    </footer>

    <!-- jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </body>
</html>

Answer 1

如果将“关于”文本放在其自己的部分中，则可以防止出血。

Answer 2

最简单的方法是将标头元素上的高度从height: 80vh;更改为min-height: 80vh;

header {
  background: white;
  background-size: cover;
  min-height: 80vh;
  width: 100%;
}

之所以将文本“出血”到“我的工作”部分，是因为标题的大小不足以容纳其中的内容。当屏幕足够宽以在其中容纳所有文本时，这将使标题div为80vh，但如果屏幕较薄则允许它扩展，并迫使文本换行更多。

查看此代码段以获取有效的演示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: "Roboto Cn", sans-serif;
}


/* body */

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

header {
  background: white;
  background-size: cover;
  min-height: 80vh;
  width: 100%;
}


/* nav bar */

#logo {
  margin: 0;
}

nav {
  margin: 0;
  padding: 20px 55px 0 55px;
  overflow: hidden;
}

nav img {
  float: left;
  padding-left: 15px;
  height: 40px;
  width: 51px;
}

nav ul {
  float: right;
}

nav li {
  display: inline-block;
  padding: 15px;
}

nav a {
  text-decoration: none;
  color: black;
}

#about {
  background: white;
  text-align: center;
  padding: 200px 200px 0 200px;
  font-size: 1.25rem;
}

#work {
  background: blue;
  text-align: center;
}

<body>
  <header>
    <nav>
      <div id="logo"><img src="/images/logo.png" /></div>
      <ul>
        <li><a href="#">about</a></li>
        <li><a href="#">work</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </nav>
    <p id="about">
      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>
  </header>
  <section id="work">
    <h1>My Work</h1>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </section>
  <div id="contact">
    <h1>Contact</h1>
  </div>
  <footer>
    <h1>Footer</h1>
  </footer>

  <!-- jQuery CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

</html>

Answer 3

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: "Roboto Cn", sans-serif;
}

/* body */
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

header {
  background: white;
  width: 100%;
  padding: 20px 50px;
}

/* nav bar */
#logo {
  margin: 0;
}

nav {
  margin: 0;
  overflow: hidden;
}
nav img {
  float: left;
  padding-left: 15px;
  height: 40px;
  width: 51px;
}
nav ul {
  float: right;
}
nav li {
  display: inline-block;
  padding: 15px;
}
nav a {
  text-decoration: none;
  color: black;
}

#about {
  background: white;
  text-align: center;
  padding: 40px 30px;
  font-size: 1.25rem;
}

#work {
  background: blue;
  text-align: center;
  padding: 40px 0;
}

 <body>
    <header>
      <nav>
        <div id="logo"><img src="/images/logo.png" /></div>
        <ul>
          <li><a href="#">about</a></li>
          <li><a href="#">work</a></li>
          <li><a href="#">contact</a></li>
        </ul>
      </nav>
      <p id="about">
        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>
    </header>
    <section id="work">
      <h1>My Work</h1>
      <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </section>
    <div id="contact">
      <h1>Contact</h1>
    </div>
    <footer>
      <h1>Footer</h1>
    </footer>

    <!-- jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </body>
</html>

不使用高度，而是尝试在父padding上使用div。希望对您有帮助

为什么底部div文本会渗入顶部div

3 个答案: