Question

一段时间以来，我一直在摆弄一些html和CSS-尝试制作响应式布局。但是，当页眉包含一些将宽度推开的内容时，并且在可见滚动条时，页脚看起来在右边有些空白是一个问题。

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

注意：，我在标头中使用某些flex布局时遇到了问题，但是试图保持简单，因此我将ul的宽度强制设置为400像素。 / p>

我的代码：

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>

Answer 1

只需将struct student_t* read(struct student_t* p, int *err_code); void show(const struct student_t* p); struct student_t { char name[20]; char surname[40]; int index; }; int main() { int error; int *pe=&error; struct student_t student,*pstudent; pstudent=&student; read(pstudent,pe); show(pstudent); return 0; } struct student_t* read(struct student_t* p, int *err_code) { printf("Podaj dane:\n"); scanf("%s,%s,%d", p->name, p->surname, &p->index); *err_code=0; return p; } void show(const struct student_t* p) { printf("%s %s, %d",p->name,p->surname,p->index); }添加到标题样式中即可。

Answer 2

添加与标题相同的填充

footer {
left: 0;
right: 0;
background-color: blueviolet;
padding-left: 3em;
padding-right: 3em;
width: 100%;
 }

Answer 3

根据经验，请不要对任何像素进行硬编码。这将导致页面无响应。使用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%; }

CSS页脚宽度不全宽

我的代码：

3 个答案: