我有一个页面，其中包含动态生成的表。该表的列数及其内容的宽度是在页面生成时确定的，但是可以足够大以使该表超过窗口的宽度。
发生这种情况时，body元素的宽度不会扩展为包含其内容，而是限制为窗口的宽度。这样，所有其他后代元素（表除外）的最大宽度也等于窗口的宽度：
__________________________ window bounds
| BODY ELEM |
| ______________________ |
| | HEADER ELEM | |
| |____________________| |
| |
| ______________________ |
| | DIV#main | |
| | __________________________________________________
| | | ELEMENT WHICH IS WIDER THAN WINDOW |
| | |________________________________________________|
| |____________________| |
| |
| ______________________ |
| | FOOTER ELEM | |
| |____________________| |
|________________________|
这意味着当水平滚动时，其他块级元素会过早停止（它们的背景色不会扩展，从而破坏了页面的外观）。
这是一个显示问题的jsFiddle。注意结果窗口中的黄色块如何向右扩展，而棕色，白色和蓝色块却没有。
我正在寻找一种解决此问题的纯CSS方法。
我最不提出任何要求就不改变文档结构的方法是：
body {
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
}
但是，IE根本不支持“最小内容”。是否有人对此问题有跨浏览器的纯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%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句