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

问题描述 投票：0回答：2

我做了一些网站，并使用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;在1行显示4个图像。

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

enter image description here

如果浏览器很小，它可以很好地工作。

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

enter image description here

<section>入侵<footer>

有什么办法可以预防吗？

谢谢。

html css flexbox
2个回答
0
投票

看一下这个！只需要将高度和宽度改为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>
0
投票

删除max-height: 100vh;上的fiddle示例

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.