将正文元素宽度扩展到窗口宽度之外答案

【问题标题】：Expand body element width beyond width of window将正文元素宽度扩展到窗口宽度之外
【发布时间】：2014-04-13 15:15:24
【问题描述】：

我有一个包含动态生成表的页面。此表格的列数及其内容的宽度在页面生成时确定，但可能足够大，以至于表格超出窗口的宽度。

发生这种情况时，body 元素的宽度不会扩展以包含其内容，而是限制为窗口的宽度。因此，所有其他后代元素（表格除外）也具有等于窗口宽度的最大宽度：

__________________________ window bounds
| BODY ELEM              |
| ______________________ | 
| |     HEADER ELEM    | |
| |____________________| |
|                        |
| ______________________ |
| |      DIV#main      | |
| | __________________________________________________
| | |    ELEMENT WHICH IS WIDER THAN WINDOW          |
| | |________________________________________________|
| |____________________| |
|                        |
| ______________________ |
| |     FOOTER ELEM    | |
| |____________________| |
|________________________|

这意味着当水平滚动时，其他块级元素会过早停止（它们的背景颜色不会扩展，破坏了页面的外观）。

Here is a jsFiddle showing the problem。请注意结果窗口中的黄色块如何向右扩展，但棕色、白色和蓝色块不会。

我正在寻找解决这个问题的纯 CSS 方法。

我在不改变文档结构的情况下最接近的是：

body {
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}

但是，IE 根本不支持“min-content”。有没有人有针对这个问题的跨浏览器、纯 CSS 解决方案？

为了完整起见（以防人们看不到 jsFiddle），这里是一些显示问题的代码：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">

    * {margin:0;padding:0;}

    body {
        background-color: #888;
        /* Adding the two lines below fixes the problem for webkit and moz.  But IE does not support min-content.
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        */
    }

    header {
        background-color: #321;
    }

    header nav {
        padding: 10px;
        color: #FFF;
    }

    footer {
        padding: 10px;
        color: #ccc;
        background-color: #123;
    }

    #main {
        padding: 16px;
        background-color: #FFF;
    }

    #wideContent {
        background: #FF0;
        width: 4800px; /* In reality, this will vary at runtime, so I cannot set an explict width on the body */
    }

    table {
        border-collapse: separate;
        border-spacing: 0px;
        border-color: #808080;
        border-style: solid;
        border-width: 1px;
        border-bottom-width: 0;
        background-color: #FFF;
    }

    td, th {
        border-color: #808080;
        border-style: none;
        border-width: 0;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding: 5px 10px;
        min-width: 100px;
    }

    </style>
  </head>
  <body>
    <header>
      <nav>Header</nav>
    </header>
    <div id="main">
      <div id="wideContent">
        <p>Content here will be a table with a very large number of columns.</p>
        <p>The content and width of the table is not known beforehand, so cannot be preset anywhere in CSS.</p>
      </div>
    </div>
    <footer>
      <p>Footer</p>
    </footer>
  </body>
</html>

【问题讨论】：

是否可以仅将宽元素包含到具有溢出滚动的父元素中？
@Bobby5193 恐怕不是。因为宽元素是一个可能有很多行的表格，所以除非我对元素的高度进行了人为的限制，否则在显着向下滚动页面之前，环绕元素的水平滚动条是不可见的。

标签： html css horizontal-scrolling

【解决方案1】：

我刚刚添加了以下 CSS。它有效。

body {
    float: left;
    min-width: 100%;
}

【讨论】：

优秀。请注意，浮动 #main 元素也是不必要的；只浮动body 就可以了。
@daiscog 感谢您的通知。
进一步注意：当“宽元素”对于窗口来说不太宽时（有时也可能发生），浮动主体会将所有内容缩小到其最小宽度。添加min-width: 100%; 解决了这个问题。我已编辑您的答案以添加此内容。
这出乎意料。很好的发现！
我希望能解释一下为什么 float: left 允许正文宽度扩展到其内容。

【解决方案2】：

这不能完全解决您提出的问题，但一个巧妙的选择是将溢出：自动添加到#main，这样它就可以在内部滚动而不会破坏布局。

#main {
    overflow: auto;
}

演示：http://jsfiddle.net/dZS4V/

【讨论】：

感谢您的回复。唉，#main 的水平滚动条将位于元素的底部，因此在用户显着向下滚动之前可能不可见。

【解决方案3】：

这是一种方法：

#wideContent {
    background: #FF0;
    width: 4800px; /* In reality, this will vary at runtime, so I cannot set an explict width on the body */
    max-width: 100%;
}

wideContent div 将调整为窗口的宽度。

【讨论】：

感谢您的回复。这在现实中是行不通的，因为元素不能水平收缩。（如问题中所述，人为设置的显式宽度仅用于说明目的。问题是元素的自然最小宽度对于窗口来说太大了。）

【解决方案4】：

经过进一步的摆弄，我想出了一个解决方案，其中涉及向三个部分元素添加一个额外的包装元素。这可能对其他有同样问题的人有用，但是，我不会将其标记为已接受（还），因为我仍然很想看看是否有一个根本不涉及修改 HTML 的 CSS 解决方案。

无论如何，这个解决方案是将header、footer 和div#main 元素包装在一个新的div.layout-row 元素中并添加以下CSS：

    body {
        display: table;
        border-spacing: 0;
        min-width: 100%;
        box-sizing: border-box; /* Only needed if your body has padding or borders */
        margin: 0;
    }

    div.layout-row {
        display: table-row;
    }

    header, footer, div#main {
        display: table-cell;
    }

似乎可以在 Chrome、FF 和 IE 中使用。 Demo here.

【讨论】：