一段时间以来，我一直在摆弄一些 html 和 css - 尝试制作响应式布局。但是，如果页眉包含一些超出宽度的内容，并且当滚动条可见时页脚看起来右侧有一些空白，则会出现问题。
如何使页脚与窗口保持相同的宽度？
注意: 我在页眉中使用一些 flex 布局时遇到了问题，但我试图让事情变得简单，所以我强行将 ul 的宽度设置为 400像素。
我的代码:
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
min-height: 100%;
}
ul {
margin: 0;
padding: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
ul,
li {
display: inline-block;
}
body {
display: flex;
flex-direction: column;
}
header {
left: 0;
right: 0;
background-color: red;
padding-left: 3em;
padding-right: 3em;
width: 100%;
}
footer {
left: 0;
right: 0;
background-color: blueviolet;
width: 100%;
}
/* force bigger width */
ul {
width: 400px;
}<!doctype html>
<html>
<head>
<title>Simple Html5 Structure</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" />
<style>
</style>
</head>
<body>
<header class="page-header">
<nav class="site-nav-menu">
<ul class="site-nav-menu__root">
<li class="site-nav-menu__item">
<a href="#">Home</a>
</li>
<li class="site-nav-menu__item">
<a href="#">Contact</a>
</li>
<li class="site-nav-menu__item">
<a href="#">About</a>
</li>
</ul>
</nav>
</header>
<main>
<article></article>
</main>
<footer>
<div class="footer__copyright">
© Copyright 2019
<strong>Acme Ltd</strong>
</div>
</footer>
</body>
</html>最佳答案
只需将 box-sizing: border-box; 添加到您的页眉样式即可。
关于html - CSS 页脚宽度不是全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56211950/