html – CSS div子宽度大于页面窗口大小

html – CSS div子宽度大于页面窗口大小,第1张

概述这是我的第一篇文章,所以我希望我做对了. 我遇到一个问题,我有子div需要相同的宽度. #content可能比浏览器窗口大(因此3000px,但不会总是大于浏览器窗口).目前正在正确显示#content,我可以使用滚动条查看整个#content,但#messages和#menu会在浏览器窗口的宽度处被切断. 我尝试过使用width:inherit和其他几个选项,但它们没有用.还有其他人有工作解决方 这是我的第一篇文章,所以我希望我做对了.

我遇到一个问题,我有子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子宽度大于页面窗口大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1054952.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存