首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS页脚宽度不是全角

CSS页脚宽度不是全角
EN

Stack Overflow用户
提问于 2019-05-20 04:57:46
回答 3查看 689关注 0票数 0

一段时间以来,我一直在摆弄一些html和css --试图做出一个响应式的布局。但是,当页眉包含一些将宽度向外推的内容,并且当滚动条可见时,页脚看起来像是在右侧有一些空格时,就会出现一个问题。

如何使页脚保持与窗口相同的宽度?

注意:我在页眉中使用一些flex布局时遇到了这个问题,但为了简单起见,我强制将ul的宽度设置为400像素。

我的代码:

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<!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>

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-05-20 05:05:43

只需在标题样式中添加box-sizing: border-box;即可。

票数 2
EN

Stack Overflow用户

发布于 2019-05-20 05:09:16

添加与标题相同的填充

代码语言:javascript
复制
footer {
left: 0;
right: 0;
background-color: blueviolet;
padding-left: 3em;
padding-right: 3em;
width: 100%;
 }
票数 1
EN

Stack Overflow用户

发布于 2019-05-20 05:48:14

作为经验法则,尽量不要硬编码任何像素的东西。这将导致页面无响应。使用Rems or percentages, here is an article that talks about CSS sizing units.下面的解决方案应该可以做到这一点。

代码语言:javascript
复制
ul {
width: 100%;}

header {
left: 0;
right: 0;
background-color:pink;
padding-left: 0%;
padding-right: 0%;
width: 100%; }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56211950

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档