Css 保持标题宽度至少为内容宽度的100%_Css_Html_Width

Css 保持标题宽度至少为内容宽度的100%

css html

Css 保持标题宽度至少为内容宽度的100%,css,html,width,Css,Html,Width,我有一个标题，应该保持至少与下面的div一样宽或更宽。一切看起来都很好，因为窗口比内容大，但当窗口变小时，顶部div也变小了 #top{ border:1px solid black; height:200px; width:100%; } #content{ margin:auto; width:1000px; height:600px; border:1px solid red; } <body> <div id

我有一个标题，应该保持至少与下面的div一样宽或更宽。一切看起来都很好，因为窗口比内容大，但当窗口变小时，顶部div也变小了

#top{

    border:1px solid black;
    height:200px;
    width:100%;

}
#content{
    margin:auto;
    width:1000px;
    height:600px;
    border:1px solid red;
}

<body>
<div id="top"></div>
<div id="content"></div>
</body>

#顶部{
边框：1px纯黑；
高度：200px；
宽度：100%；
}
#内容{
保证金：自动；
宽度：1000px；
高度：600px；
边框：1px纯红；
}

有什么建议吗

我认为您的问题在于内容的固定宽度，因为顶部div有一个百分比宽度，所以要解决这个问题，只需将内容div更改为一个比我小一点的百分比宽度，我将其设置为80%

#content{
margin:auto;
width:80%;
height:600px;
border:1px solid red;
}

这是您的最新信息

希望能有所帮助。

首先，您可以将html包装在容器中，如下所示：

<div id = "divContainer">
    <div id="top"></div>
    <div id="content"></div>
</div>

你可以在这里看到：

注意：在这种方法中，两个div的宽度始终相同

如果您希望强制执行1000px宽度，但内容宽度仍小于顶部div，则可以对

#content

类进行轻微调整，如下所示：

#content {
    margin:auto;
    width:90%;
    height:600px;
    border:1px solid red;
}

当你在CSS中给一个元素一个100%的宽度时，你基本上是让这个元素的内容区域完全等于它的父元素的显式宽度——但前提是它的父元素有一个显式宽度

尝试使用javascript设置顶部的宽度

var x = $('#content').width();
$('#top').width(x);

谢谢您的建议！提供的答案都不好，但给了我一些想法，如果我不够具体，请原谅。

var x = $('#content').width();
$('#top').width(x);