4

大家这是我的第一篇文章，所以我希望我做得对。

我面临一个问题，我有需要相同宽度的子 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;
}
4

1 回答 1

1

您可以尝试将它们包装在另一个 DIV 中，并在那里指定宽度；子 DIV 将自动填充到父 DIV 的宽度：

<div id="container">
    <div id="messages">test</div>
    <div id="menu">test</div>
    <div id="content">test</div>
</div>

然后将宽度应用于容器 DIV 而不是“内容”：

#container {
    width: 3000px;
}

它在您的示例中不起作用的原因是因为 DIV 是 body 标签的子标签，它具有指定的最小宽度，但没有像我上面显示的那样明确定义。

于 2013-08-12T10:47:15.177 回答