内容溢出时页眉和页脚占据页面的全宽答案

【问题标题】：Header and Footer to take full width of page when content overflows内容溢出时页眉和页脚占据页面的全宽
【发布时间】：2019-09-16 23:39:43
【问题描述】：

示例 - https://codepen.io/Rhinoo/pen/GRKBVQJ

<html>  
  <body>
    <style>
      header {
         background:navy; 
         color:white; 
         padding:10px; 
         margin-bottom:50px
      }
      footer {
         background:silver; 
         padding:10px;
         margin-top: 50px;
      }      
    </style>

    <div>      

      <header>
        Some toolbar here that should be 100% width | Links | And stuff
      </header>

      <div class="content">
         <p style="white-space: nowrap;">
           Content here thats very long and doesn't break so overflow width... quick brown fox jumped over the lazy dog .........
      </p>

    </div>

    <footer>
      Typical footer info here (c) Someone at sometime...
    </footer>

    </div>      
  </body>
</html>

当浏览器被调整为比表格更窄时（因此内容溢出）水平滚动条出现 - 但页眉/页脚不会占据整个宽度。

仅使用 CSS/HTML 如何让页眉/页脚占据整个宽度，无论内容是否溢出？

【问题讨论】：

请将所有的代码放在这里。这包括 CSS，而不仅仅是 HTML。链接到 codepen 是不够的。
为什么会这样？它是这类事情的完美游乐场吗？（在线编辑，即时查看结果，其他修改和保存等）
@Ryan 我很惊讶一个经验丰富的用户甚至会问这样的问题：寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为，a具体的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。
@Ryan 我并不想变得咄咄逼人或居高临下。这个问题的 CSS 是回答它的关键。不将其包含在问题本身中会使该问题依赖于第三方网站才能回答。请阅读这篇博文：Introducing Runnable JavaScript, CSS, and HTML Code Snippets。它详细介绍了与面向 Web 的域问题相关的许多问题以及 SO 为缓解这些问题而采取的步骤。
@zero298 - 干杯，有道理，我之前没有在 SO 上看到可运行的 webdev 东西，它内联了我使用 codepen 的东西（网络开发不是我常用的东西）。

标签： html css responsive

【解决方案1】：

body {
    dispaly: table;
}

例子：

header {
  background:navy; 
  color:white; 
  padding:10px; 
  margin-bottom:50px
}
footer {
  background:silver; 
  padding:10px;
  margin-top: 50px;
}

table {white-space: nowrap;}

body {
  display: table;
}

    <div>
      
    <header>
      Some toolbar here | Links | And stuff
    </header>
    <div class="content">
      <p>Content here</p>
      
      <table border="1">
        <tr>
          <th>Some big table here</th>
          <td>Going on and on</td>
          <td>and on and on and on</td>
          <td>and on and on and on</td>
          <td>and on and on and on</td>
          <td>and on and on and on</td>
          <td>and on and on and on</td>
        </td>
      <table>
        <p>Looks fine normally, but if you make window smaller than width of table so horizontal scrollbars appear, then scroll right the header/footer are not full width
    </div>
    <footer>
      Typical footer info here (c) Someone at sometime...
    </footer>
    
      </div>

【讨论】：

修复了一个问题，但引入了另一个问题 - 当内容比全屏窄时，停止页眉/页脚 div 占据全宽 - 在展开的窗口中运行代码 sn-p 你会看到。
害怕 - 如果您使用 display:table 或 display:inline-flex codepen.io/Rhinoo/pen/OJLoJPo，如果浏览器比内容更宽，页眉/页脚 div 不再占据全宽
body { display: table; width: 100%; }

【解决方案2】：

表格内的文本不会中断，因为您在其中添加了white-space: nowrap;。删除它，它会工作。如果您仍想保留它，请考虑使用overflow-x: auto; 在表格周围添加一个 div，它不会破坏较小尺寸的布局。

header {
  background:navy; 
  color:white; 
  padding:10px; 
  margin-bottom:50px
}
footer {
  background:silver; 
  padding:10px;
  margin-top: 50px;
}

table {white-space: nowrap;}

.table-responsive {
  overflow-x: auto;
}

    <div>
      
    <header>
      Some toolbar here | Links | And stuff
    </header>
    <div class="content">
      <p>Content here</p>
      
      <div class="table-responsive">
      <table border="1">
        <tr>
          <th>Some big table here</th>
          <td>Going on and on</td>
          <td>and on and on and on</td>
          <td>and on and on and on</td>
          <td>and on and on and on</td>
          <td>and on and on and on</td>
          <td>and on and on and on</td>
        </td>
      </table>
      </div>
        <p>Looks fine normally, but if you make window smaller than width of table so horizontal scrollbars appear, then scroll right the header/footer are not full width
    </div>
    <footer>
      Typical footer info here (c) Someone at sometime...
    </footer>
    
      </div>

【讨论】：

nowrap 只是为了快速说明内容溢出时会发生什么。（现实生活中有几张大桌子和一些使用小型移动浏览器的用户）。
您可以重新布局表格以适应移动设备，也可以使用 overflow-x: auto 使它们水平滚动。在我的答案中添加了一个示例。
overflow-x on table parent 不能很好地工作。在桌面上它很丑，因为滚动条位于表格的底部，而不是用户期望的窗口边缘（在这种情况下，它是一个很长的表格）。在移动设备上，它会停止捏调整大小的工作，并且它的手可以“缩小”以查看更多表格。每次我偶然发现 CSS 时，似乎应该是简单的事情是一个复杂的，令人费解的意大利面条混乱的神秘和痛苦......