Question

我做了一些网站，并使用flexbox来装饰布局。

页面结构很简单。只有3个标签。

<header>

<section>

<footer>

[index.html]

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
  <header>
    <div class="header__left">
      <span>Email here or call</span>
    </div>
    <div class="header__center">
      <img src="img/logo.png">
    </div>
    <div class="header__right">
      <a href="#">About us</a>
      <a href="#">Our Work</a>
      <a href="#">Our People</a>
    </div>
  </header>
  <section>
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
  </section>
  <footer>
    THIS IS FOOTER
  </footer>
</body>
</html>

[style.css]

html, body {
  padding: 0;
  margin: 0;
}
header {
  display: flex;
  height: 70px;
}
.header__left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-height: 100vh;
}
section img {
  max-width: 25vw;
}

并定义max-width: 25vw;以在一行中显示4张图像。

当我进入网站时，看起来像这样。

如果浏览器很小，则可以正常运行。

但是当我增加浏览器大小时，

<section>入侵<footer>

有什么办法可以防止它？

谢谢。

Answer 1

检查一下！只是您必须将高度和宽度更改为100％ https://jsfiddle.net/ksmLwngp/4/

html, body {
  padding: 0;
  margin: 0;
}
header {
  display: flex;
  height: 70px;
}
.header__left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-height: 100vh;
}
section img {
  max-width: 25vw;
}

  .imgbox {
 width:100%;
   height: 100%;
  }

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
  <header>
    <div class="header__left">
      <span>Email here or call</span>
    </div>
    <div class="header__center">
      <img src="img/logo.png">
    </div>
    <div class="header__right">
      <a href="#">About us</a>
      <a href="#">Our Work</a>
      <a href="#">Our People</a>
    </div>
  </header>
  <section>
  <div class="imgbox">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    <img src="./img/dummy.jpg" alt="Sample photo">
    </div>
  </section>
  <footer>
    THIS IS FOOTER
  </footer>
</body>
</html>

Answer 2

在fiddle上删除max-height: 100vh;

响应式Flexbox布局图像溢出页脚

2 个答案: