将体元素宽度扩展到窗口宽度以外
[英]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. 此表的列数及其内容的宽度在页面生成时确定，但可以足够大以使表格超出窗口的宽度。
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. 发生这种情况时，body元素的宽度不会扩展以包含其内容，而是限制为窗口的宽度。 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). 这意味着当水平滚动时，其他块级元素会过早停止（它们的背景颜色不会扩展，破坏页面的外观）。
Here is a jsFiddle showing the problem . 这是一个显示问题的jsFiddle 。 Notice how the yellow block in the results window expands to the right, but the brown, white and blue blocks do not. 注意结果窗口中的黄色块如何向右扩展，但棕色，白色和蓝色块不会。
I'm looking for a pure CSS method of solving this problem. 我正在寻找一种解决这个问题的纯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;
}
However, "min-content" is not supported by IE at all. 但是，IE根本不支持“min-content”。 Does anyone have a cross-browser, pure CSS solution to this issue? 有没有人有这个问题的跨浏览器，纯CSS解决方案？
For completeness (in case people can't see the jsFiddle), here is some code displaying the problem: 为了完整性（如果人们看不到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>
4 个解决方案
解决方案1
11 已采纳 2014-03-10 14:04:39
I just added following CSS. 我刚刚添加了以下CSS。 And it works. 它有效。
body {
float: left;
min-width: 100%;
}
解决方案2
0 2014-03-10 13:40:54
This isn't a solution to exactly the question you asked, but a neat option would be to add overflow:auto to #main, so it can scroll internally without breaking the layout. 这不完全是你问的问题的解决方案，但一个简洁的选择是添加overflow：auto到#main，因此它可以在内部滚动而不会破坏布局。
#main {
overflow: auto;
}
Demo: http://jsfiddle.net/dZS4V/ 演示： http ： //jsfiddle.net/dZS4V/
解决方案3
0 2014-03-10 13:49:56
This is an approach: 这是一种方法：
#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%;
}
The wideContent div will adjust to the width of the window. wideContent div将调整为窗口的宽度。
解决方案4
0 2014-03-10 14:01:57
After further fiddling, I've come up with a solution which involves adding an additional wrapper element to the three section elements. 在进一步摆弄之后，我想出了一个解决方案，其中包括为三个部分元素添加一个额外的包装元素。 This may be useful to others with the same problem, however, I'm not going to mark this as accepted (yet) because I'm still keen to see if there's a CSS solution which doesn't involve modifying the HTML at all. 这可能对遇到同样问题的其他人有用，但是，我不打算将其标记为已接受（尚未），因为我仍然希望看到是否存在一个不涉及修改HTML的CSS解决方案。
Anyway, this solution is to wrap the header , footer and div#main elements in a new div.layout-row element and add the following CSS: 无论如何，这个解决方案是将header ， footer和div#main div.layout-row元素包装在一个新的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;
}
Seems to work in Chrome, FF and IE. 似乎可以在Chrome，FF和IE中使用。 Demo here . 在这里演示 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.