CSS：特定区域上的全宽
嗨，我有一个宽度为1150px的容器。现在我有了另一个主菜单，宽度：100%，我想放在容器内。当然，它只能得到100%（1150px），但我想要它从一边到另一边的全宽，所以它应该忽略设置的宽度，只用于.main菜单 我试过位置：绝对，这让一切都变得错误和怪异CSS：特定区域上的全宽,css,Css,嗨，我有一个宽度为1150px的容器。现在我有了另一个主菜单，宽度：100%，我想放在容器内。当然，它只能得到100%（1150px），但我想要它从一边到另一边的全宽，所以它应该忽略设置的宽度，只用于.main菜单 我试过位置：绝对，这让一切都变得错误和怪异 #mainmenu { height: 37px; width: 100%; margin: 0px auto; background-image: url(../images/mainmenu_bg5.jp
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px auto;
background-image: url(../images/mainmenu_bg5.jpg);
}
如果您的容器是固定宽度的，但是您想要一个背景为全页宽度的菜单，那么您可以将菜单背景作为
html为什么菜单首先在容器中？如果你想让菜单跨越整个宽度，但是容器的内容只有1150px，我认为根据定义，把菜单放在容器中是不对的。考虑重构文档。这是一个示例，我没有您的完整代码：
<body>
<div id="page">
<div id="header" style="background:Blue;">
header header header
</div>
<div id="mainmenu" style="background:Green;">
menu menu menu menu
</div>
<div id="container" style="width:1150px;margin:auto;background:Red;">
container container container
</div>
</div>
</body>
收割台
菜单菜单
集装箱
如果您希望页眉和菜单的内容不超过1150 px，我想这就是您想要的，那么考虑一下：
<head>
<style type="text/css">
.pagewidth {
width: 1150px;
margin: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="header" style="background:Blue;">
<div class="pagewidth">
header header header
</div>
</div>
<div id="mainmenu" style="background:Green;">
<div class="pagewidth">
menu menu menu menu
</div>
</div>
<div id="container" class="pagewidth" style="background:Red;">
container container container
</div>
</div>
</body>
.页面宽度{
宽度：1150px；
保证金：自动；
}
收割台
菜单菜单
集装箱
css如下所示，但有时它取决于内部内容：
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px;
position: relative;
background-image: url(../images/mainmenu_bg5.jpg);
}
这是一个jQuery解决方案：
$('#mainmenu').width() == $('#container').width();
要获得背景图像以模拟跨越整个页面宽度的菜单栏，您需要将#主菜单
背景应用于正文
或容器div，如下所示：
body {
background: url(YOURIMAGE) repeat-x left 64px;
}
64px
需要显示#主菜单
距顶部的距离
如果主体
已经有了背景图像，那么您需要在主体内部包含其他所有内容的另一个div。如果您无法控制HTML
，则使用javascript插入一个div，该div将包装所有内容或在其后面进行渲染（使用position
和z-index
）position:absolute是在将背景保留在#主菜单中的情况下获取此内容的最佳方法。事实上，这是我脑子里唯一能想到的。当然，没有javascript。其他一切都需要更改HTML或将背景属性移动到其他位置
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
因为#主菜单的宽度：100%将成为视口的100%，而不是包含块的100%。（除非父对象是位置：相对或溢出：隐藏）
所以当你说它“变得很奇怪”的时候，我想那是因为页面上的其他东西。绝对和浮动都会将项目从正常文档流中删除。因此，菜单下面的东西可以&将在它下面结束
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
基本上，解决方法是在主菜单之后的第一件事情上应用37像素的边距或填充。您也无法使用margin:0 auto将绝对定位的元素居中，但如果您希望它跨越视口的整个宽度，这不应该是一个问题……如果您希望将菜单的活动部分居中，当然，您需要某种类型的子体居中：
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu > *
{
margin:0 auto;
}
/* Exact selector not recommended due to poor browser support */
/* & more properties needed if descendant is list with floated <li>s */
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
#主菜单
{
位置：绝对位置；
左：0；顶部：？px；
宽度：100%；
高度：37像素；
背景图像：url（../images/main menu_bg5.jpg）；
}
#主菜单>*
{
保证金：0自动；
}
/*由于浏览器支持较差，不建议使用精确选择器*/
/*如果子体是带有浮动s的列表，则需要更多属性（&M）*/
#主菜单+*
{
填充顶部：37px；
}
/*由于浏览器支持较差，不建议使用精确选择器*/
但是在页面上，你会看到很多与位置相关的变化：绝对。所以为了解决这个问题，我真的需要更多地了解页面上的其他内容
你可能会找到另一个解决方案，但如果你不这样做的话——发布一个我可以看的页面&我可能会帮助你克服你在绝对定位方面所经历的奇怪。也就是说，如果它能与这个特定的布局一起工作。是的，这就是我要找的，制作这样一个菜单栏，我如何能将菜单背景定位为html？你能给我举一个例子吗？请检查我更新的问题的CSW，而你的解决方案可能是“正确的”（因为它有效），也可能是“正确的”（因为原始文档的语义可能有错误），我认为，一开始就认为样式决定应该表明文档的数据设计有问题是错误的。对于冲突的风格和正确的数据，几乎总有比修改数据更好的解决方案。同意，也许我的措辞并不完美（我不是英语母语）。我使用“考虑”一词来表示考虑是否有可能证明文件中的更改是合理的。如果出于任何原因，文档中的更改是不合理的，那么我的答案可能不是最好的。但是，如果更改是合理的，例如当网站尚未发布时，那么我的答案可能是一个好的解决方案，因为它易于实现和理解。我认为这比摆弄相互矛盾的css规则要好。这取决于Karem的处境，imho。