发生这种情况时,body元素的宽度不会扩展以包含其内容,但仅限于窗口的宽度.因此,所有其他后代元素(表除外)的最大宽度也等于窗口的宽度：
__________________________ window bounds| BODY ELEM || ______________________ | | | header ELEM | || |____________________| || || ______________________ || | div#main | || | __________________________________________________| | | ELEMENT WHICH IS WIDER THAN WINDOW || | |________________________________________________|| |____________________| || || ______________________ || | FOOTER ELEM | || |____________________| ||________________________|
这意味着当水平滚动时,其他块级元素会过早停止(它们的背景颜色不会扩展,破坏页面的外观).
Here is a jsFiddle showing the problem.注意结果窗口中的黄色块如何向右扩展,但棕色,白色和蓝色块不会.
我正在寻找一种解决这个问题的纯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%;} 总结 以上是内存溢出为你收集整理的html – 将主体元素宽度扩展到窗口宽度之外全部内容，希望文章能够帮你解决html – 将主体元素宽度扩展到窗口宽度之外所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）