[英]Expand body element width beyond width of window
我有一个包含动态生成的表的页面。 此表的列数及其内容的宽度在页面生成时确定,但可以足够大以使表格超出窗口的宽度。
发生这种情况时,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根本不支持“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%;
}
这不完全是你问的问题的解决方案,但一个简洁的选择是添加overflow:auto到#main,因此它可以在内部滚动而不会破坏布局。
#main {
overflow: auto;
}
演示: http : //jsfiddle.net/dZS4V/
这是一种方法:
#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%;
}
wideContent div将调整为窗口的宽度。
在进一步摆弄之后,我想出了一个解决方案,其中包括为三个部分元素添加一个额外的包装元素。 这可能对遇到同样问题的其他人有用,但是,我不打算将其标记为已接受(尚未),因为我仍然希望看到是否存在一个不涉及修改HTML的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;
}
似乎可以在Chrome,FF和IE中使用。 在这里演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.