HTML/CSS：全宽度的问题_Html_Css

HTML/CSS：全宽度的问题

html css

HTML/CSS：全宽度的问题,html,css,Html,Css,我已创建此测试页面：容器宽度1500px的宽度红色div为1500px，黑色div为100% 当浏览器窗口小于1500px（例如1000px）时，黑框的宽度将仅与窗口的宽度相同。我想它填补了上述内容一样多请注意，红色框具有动态宽度。因此，我无法在黑盒上设置最小宽度=1500px等。将它们都放在另一个div中。然后该div将被推到其中任何一个div的宽度（红色div），而宽度为100%的某个div将匹配该div。将它们都放在另一个div中。然后该div将被推到其中任何一个div的宽度（

我已创建此测试页面：


容器宽度1500px的宽度

红色div为1500px，黑色div为100%

当浏览器窗口小于1500px（例如1000px）时，黑框的宽度将仅与窗口的宽度相同。我想它填补了上述内容一样多

请注意，红色框具有动态宽度。因此，我无法在黑盒上设置最小宽度=1500px等。将它们都放在另一个div中。然后该div将被推到其中任何一个div的宽度（红色div），而宽度为100%的某个div将匹配该div。

将它们都放在另一个div中。然后该div将被推到其中任何一个div的宽度（红色div）宽度为100%的部分将与之匹配

您只需将黑色div与红色div包裹起来：

<body style="background-color:#e0e0e0;">

    <div style="width:1500px;background-color:#ff0000;">
        Container width a width of 1500px<!--this is where you closed your div-->
             <div style="width:100%;background-color:#000;height:100px;">
             </div>
    </div><!--this is where you should close it to make it work-->
</body>


容器宽度1500px的宽度

您只需将黑色div与红色div包裹起来：

<body style="background-color:#e0e0e0;">

    <div style="width:1500px;background-color:#ff0000;">
        Container width a width of 1500px<!--this is where you closed your div-->
             <div style="width:100%;background-color:#000;height:100px;">
             </div>
    </div><!--this is where you should close it to make it work-->
</body>


容器宽度1500px的宽度

要实现这一点，您需要一个绝对容器

例如，将起作用的标记

<div style="position:absolute">
   <div style="width:1500px;background-color:#ff0000;">Container width a width of 1500px</div>
   <div style="width:100%;background-color:#000;height:100px;"></div>
</div>


容器宽度1500px的宽度

编辑：如果需要，您也可以将绝对值放在主体上。

要实现这一点，您需要一个绝对值容器

例如，将起作用的标记

<div style="position:absolute">
   <div style="width:1500px;background-color:#ff0000;">Container width a width of 1500px</div>
   <div style="width:100%;background-color:#000;height:100px;"></div>
</div>


容器宽度1500px的宽度

编辑：如果需要，您也可以将绝对值放在正文上。

为什么不将红色的div放在黑色的div中？让宽度为100%，为什么不把红色的div放在黑色的div里面呢？并保留宽度=100%