展开主体元素的宽度超出窗口的宽度 [英] Expand body element width beyond width of window
问题描述
我有一个包含动态生成表的页面。这个表格的列数和它们的内容宽度是在页面生成时确定的，但可以足够大以至于表格超出窗口的宽度。
I have a page which contains a dynamically-generated table. The number of columns of this table and the width of their content is determined at page generation time, but can be sufficiently large that the table exceeds the width of the window.
发生这种情况时，body元素的宽度不会展开以包含其内容，但仅限于窗口的宽度。因此，所有其他的后代元素（除表格外）的最大宽度也等于窗口的宽度：
When this happens, the width of the body element does not expand to contain its contents, but is restricted to the width of the window. As such, all other descendent elements (with the exception of the table) also have a maximum width equal to the width of the window:
__________________________ window bounds
| BODY ELEM |
| ______________________ |
| | HEADER ELEM | |
| |____________________| |
| |
| ______________________ |
| | DIV#main | |
| | __________________________________________________
| | | ELEMENT WHICH IS WIDER THAN WINDOW |
| | |________________________________________________|
| |____________________| |
| |
| ______________________ |
| | FOOTER ELEM | |
| |____________________| |
|________________________|
这意味着当水平滚动时，其他块级元素过早停止（它们的背景颜色不会扩展，破坏页面的外观）。
This means when scrolling horizontally, the other block-level elements stop prematurely (their background colours do not expand, spoiling the look of the page).
这是一个jsFiddle显示问题。请注意结果窗口中的黄色块如何扩展到右侧，但棕色，白色和蓝色块不会显示。
Here is a jsFiddle showing the problem. Notice how the yellow block in the results window expands to the right, but the brown, white and blue blocks do not.
我正在寻找纯解决这个问题的CSS方法
最接近我没有诉诸改变文档结构的是这样的：
The closest I've come without resorting to altering the document structure at all is this:
body {
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
}
然而，最小内容根本不被IE支持。有没有人有一个跨浏览器，纯粹的CSS解决这个问题？
However, "min-content" is not supported by IE at all. Does anyone have a cross-browser, pure CSS solution to this issue?
为了完整性（如果人们看不到jsFiddle），下面是一些代码显示问题：
For completeness (in case people can't see the jsFiddle), here is some code displaying the problem:
<!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。
I just added following CSS. And it works.
body {
float: left;
min-width: 100%;
}
这篇关于展开主体元素的宽度超出窗口的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
