Question

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

发生这种情况时，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>

Answer 1

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

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

Answer 2

这不完全是你提出的问题的解决方案，但一个简洁的选择是添加overflow：auto到#main，这样它就可以在不打破布局的情况下在内部滚动。

#main {
    overflow: auto;
}

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

Answer 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将调整为窗口的宽度。

Answer 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

将体元素宽度扩展到窗口宽度以外

4 个答案: