CSS：特定全宽

嗨，我有一个宽度为1150px的容器。现在我有另一个mainmenu，宽度：100％，我想放在容器内。但当然它只能得到100％（1150px），但我希望它从一边到另一边全宽，所以它应该忽略设置的宽度只为.mainmenuCSS：特定全宽

我试过position：绝对使它全部错误和怪异

#mainmenu 
{ 
    height: 37px; 
    width: 100%; 
    margin: 0px auto; 
    background-image: url(../images/mainmenu_bg5.jpg); 

}

来源

2010-08-14 Karem

如果你的容器是固定的宽度，但希望其在整个页面宽度背景的菜单，那么你可以把菜单背景的html一个定位的背景，并保持相同的HTML代码。这将使菜单的背景“栏”覆盖整个页面宽度。这种方法的

例子：http://templates.arcsin.se/demo/freshmade-software-website-template/index.html

如何做到这一点：使用定位背景：

http://www.w3schools.com/css/pr_background-position.asp

来源

2010-08-14 01:31:54

是多数民众赞成在我正在寻找，使这样的菜单，我怎么能有菜单背景定位的HTML？你可以给我一个例子，请检查我的更新问题的css – Karem 2010-08-14 01:36:52

为什么是摆在首位的容器中的菜单？如果你想让菜单跨越整个宽度，但容器的内容只有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>

如果你想的标题和菜单的内容跨越距离不超过1150px我认为这是你想要什么，然后考虑这个问题：

<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>

来源

2010-10-30 07:58:05 Bazzz

虽然你的解决方案可能是“正确的”（在它的工作原理），也可能是“正确的”（因为原始文档的语义可能有错误），我认为首先建议风格决定应该规定文档的数据设计出现问题是错误的。与改变数据相比，几乎总是有更好的解决冲突样式和正确数据的解决方案。 – eyelidlessness 2010-10-30 08:12:37

同意，也许我的措辞不完美（我不是英语母语的人）。我使用“考虑”一词来表明反思可能为文件的变更辩护。如果由于任何原因文件的变更不合理，那么我的答案可能不是最好的。然而，如果更改是合理的，例如当网站尚未发布时，那么我的答案可能是一个很好的解决方案，因为它易于实施和理解。我认为这比用矛盾的css规则解决问题要好得多。这取决于Karem在imho的情况。 – Bazzz 2010-10-30 08:38:09

CSS低于，但有时它从里面的内容取决于：

#mainmenu 
{ 
    height: 37px; 
    width: 100%; 
    margin: 0px; 
    position: relative; 
    background-image: url(../images/mainmenu_bg5.jpg); 
}

这是一个jQuery溶液：

$('#mainmenu').width() == $('#container').width();

来源

2010-11-10 10:25:17

为了得到一个背景图像来模拟菜单栏横跨你需要应用#mainmenu背景，body或容器DIV像这样的页面的整个宽度：

body { 
    background: url(YOURIMAGE) repeat-x left 64px; 
}

的64px需要被#mainmenu距离顶端有多远。

如果body已经有一个背景图像，那么你将需要在包含其他所有内容的正文内的另一个div。如果你有过HTML然后使用JavaScript来插入div将自动换行所有内容或得到呈现它背后没有控制（使用position和z-index。）

来源

2010-11-21 16:31:53 rennat

位置：绝对是让这个而最好的方法保持#mainmenu的背景。事实上，这是我能想到的唯一一个可以从头顶上看出来的人。当然没有JavaScript。其他一切都需要更改HTML或将背景属性移到不同的地方。

#mainmenu 
{ 
    position:absolute; 
    left:0;top:??px; 
    width:100%; 
    height:37px; 
    background-image: url(../images/mainmenu_bg5.jpg); 
}

因为＃mainmenu的宽度：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 */

解决方案是，基本上，应用37px的边距或填充到#mainmenu之后的第一件事。你也将无法使用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 */

但也有很多的事情，你会看到在页面上定位的关系变化到其他事情：绝对的。所以要排除故障，我真的需要更多地了解页面上的其他内容。

您可能会发现另一种解决方案，但如果您没有 - 发布一个页面，我可以看看&我可能能够帮助您解决绝对定位问题。也就是说，如果它能用于这个特定的布局。

来源

2010-11-21 17:07:35 morewry

CSS：特定全宽

回答

相关问题