我遇到一个问题,我有子div需要相同的宽度. #content可能比浏览器窗口大(因此3000px,但不会总是大于浏览器窗口).目前正在正确显示#content,我可以使用滚动条查看整个#content,但#messages和#menu会在浏览器窗口的宽度处被切断.
我尝试过使用wIDth:inherit和其他几个选项,但它们没有用.还有其他人有工作解决方案吗?
我已经创建了一个Jsfiddle来让生活更轻松http://jsfiddle.net/Ks665/
我添加了问题的屏幕截图:
红色和绿色必须与蓝色div一样长.
HTML:
<HTML><head> <link rel="stylesheet" href="style.CSS" media="screen"/></head><body> <div ID="messages">test</div> <div ID="menu">test</div> <div ID="content">test</div> </body><HTML>
CSS:
@import url('reset.CSS');body { min-wIDth: 990px;}#messages { height: 100px; background-color: red;}#menu { height: 100px; background-color: green;}#content { background-color: blue; height: 250px; wIDth: 3000px;}解决方法 您可以尝试将它们包装在另一个div中,并在那里指定宽度;子div将自动填充到父级的宽度:
<div ID="container"> <div ID="messages">test</div> <div ID="menu">test</div> <div ID="content">test</div></div>
然后将宽度应用于容器div而不是’content’:
#container { wIDth: 3000px;}
它在你的例子中不起作用的原因是因为div是body标签的子元素,它具有指定的最小宽度,但没有明确定义,如上所示.
总结以上是内存溢出为你收集整理的html – CSS div子宽度大于页面窗口大小全部内容,希望文章能够帮你解决html – CSS div子宽度大于页面窗口大小所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)