当内容溢出时，页眉和页脚占据页面的整个宽度

Question

示例 - 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>

当浏览器调整到比 table 更窄（因此内容溢出）时，会出现水平滚动条 - 但 header/footer 不会占据整个宽度。

只使用CSS/HTML如何让header/footer占满整个宽度而不管内容是否溢出？

Answer 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>

Answer 2

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

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>

当内容溢出时，页眉和页脚占据页面的整个宽度

Header and Footer to take full width of page when content overflows

html

css

responsive