我有一个包含动态生成的表的页面.此表的列数及其内容的宽度在页面生成时确定,但可以足够大以使表格超出窗口的宽度.
发生这种情况时,body元素的宽度不会扩展以包含其内容,但仅限于窗口的宽度.因此,所有其他后代元素(表除外)的最大宽度也等于窗口的宽度：
__________________________ window bounds | BODY ELEM | | ______________________ | | | HEADER ELEM | | | |____________________| | | | | ______________________ | | | DIV#main | | | | __________________________________________________ | | | ELEMENT WHICH IS WIDER THAN WINDOW | | | |________________________________________________| | |____________________| | | | | ______________________ | | | FOOTER ELEM | | | |____________________| | |________________________|
这意味着当水平滚动时,其他块级元素会过早停止(它们的背景颜色不会扩展,破坏页面的外观).
Here is a jsFiddle showing the problem.注意结果窗口中的黄色块如何向右扩展,但棕色,白色和蓝色块不会.
我最接近改变文档结构的最接近的是：
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%;
}
