Question

每个人都是我的第一篇文章，所以我希望我做得对。

我遇到的问题是我的子div需要宽度相同。 #content可以大于浏览器窗口（因此3000px，但不会总是大于浏览器窗口）。目前#content已正确显示，我可以使用滚动条查看整个#content，但#messages和#menu会在浏览器窗口的宽度处被切断。

我尝试过使用width: inherit和其他几个选项，但它们没有用。还有其他人有工作解决方案吗？

我创建了一个JSFiddle，让生活更轻松http://jsfiddle.net/Ks665/

我添加了问题的屏幕截图：

enter image description here

红色和绿色必须与蓝色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;
}

Answer 1

您可以尝试将它们包装在另一个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标签的子元素，它具有指定的最小宽度，但没有明确定义，如上所示。

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

1 个答案: