我做了一些网站并使用 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>
[样式.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 个图像。
当我进入网站时，它看起来像这样。
如果浏览器很小，它就可以完美运行。
但是当我增加浏览器尺寸时，
<section>入侵<footer>
有什么办法可以避免吗？
谢谢。
最佳答案
看看这个! 只需将高度和宽度更改为 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>
关于html - 响应式 flexbox 布局图像溢出页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52178192/