Html CSS div子项宽度相同且大于页面窗口大小_Html_Width_Css

Html CSS div子项宽度相同且大于页面窗口大小

html css

Html CSS div子项宽度相同且大于页面窗口大小,html,width,css,Html,Width,Css,大家好，这是我的第一篇文章，所以我希望我做得对我面临一个问题，我有需要相同宽度的子div。#内容可以大于浏览器窗口（因此3000px，但并不总是大于浏览器窗口）。目前#内容显示正确，我可以使用滚动条查看整个#内容，但是#消息和#菜单在浏览器窗口的宽度处被切断我尝试过使用width:inherit和其他几个选项，但都不起作用。其他人有有效的解决方案吗我创建了一个JSFIDLE，使生活更轻松我添加了问题的屏幕截图：红色和绿色必须与蓝色div一样长 HTML: <html> &

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

我面临一个问题，我有需要相同宽度的子div。

#内容可以大于浏览器窗口（因此3000px
，但并不总是大于浏览器窗口）。目前#内容
显示正确，我可以使用滚动条查看整个#内容
，但是#消息
和#菜单
在浏览器窗口的宽度处被切断
我尝试过使用width:inherit
和其他几个选项，但都不起作用。其他人有有效的解决方案吗
我创建了一个JSFIDLE，使生活更轻松


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

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

@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的宽度：
<div id="container">
    <div id="messages">test</div>
    <div id="menu">test</div>
    <div id="content">test</div>
</div>

在您的示例中它不起作用的原因是因为div是body标记的子项，body标记指定了最小宽度，但没有像上面所示那样明确定义任何内容。
Hmm，我很难做到这一点，不要认为CSS是这样设计的。我能想到的最好办法是添加以下内容：#content{…overflow-x:scroll；}
#container {
    width: 3000px;
}