CSS页脚宽度不是全角
CSS页脚宽度不是全角
提问于 2019-05-20 04:57:46
一段时间以来，我一直在摆弄一些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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-20 05:05:43
只需在标题样式中添加box-sizing: border-box;即可。
Stack Overflow用户
发布于 2019-05-20 05:09:16
添加与标题相同的填充
footer {
left: 0;
right: 0;
background-color: blueviolet;
padding-left: 3em;
padding-right: 3em;
width: 100%;
}Stack Overflow用户
发布于 2019-05-20 05:48:14
作为经验法则，尽量不要硬编码任何像素的东西。这将导致页面无响应。使用Rems or percentages, here is an article that talks about CSS sizing units.下面的解决方案应该可以做到这一点。
ul {
width: 100%;}
header {
left: 0;
right: 0;
background-color:pink;
padding-left: 0%;
padding-right: 0%;
width: 100%; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56211950
复制相关文章
相似问题
腾讯云开发者
