html – 将主体元素宽度扩展到窗口宽度之外

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

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

解决方法

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

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

html – 将主体元素宽度扩展到窗口宽度之外

解决方法

相关文章