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

Question

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

meg*_*lop 9 html css horizontal-scrolling

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

发生这种情况时,body元素的宽度不会扩展以包含其内容,而是限制为窗口的宽度.因此,所有其他后代元素(表除外)的最大宽度也等于窗口的宽度:

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

Run Code Online (Sandbox Code Playgroud)

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

这是一个显示问题的jsFiddle.注意结果窗口中的黄色块如何向右扩展,但棕色,白色和蓝色块不会.

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

我最接近改变文档结构的最接近的是:

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

Run Code Online (Sandbox Code Playgroud)

但是,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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 11

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，3 月前
查看次数：	4526 次
最近记录：	12 年，3 月前