宽度 100% 不填满屏幕答案

【问题标题】：Width 100% does not fill the screen宽度 100% 不填满屏幕
【发布时间】：2012-04-02 13:47:45
【问题描述】：

我正在浏览其他相关线程，但我找不到修复程序.. Div 不会用所选的背景颜色填充 100% 的屏幕，只有 <li> 的宽度 CSS：

#menuspace{
    background: #2175bc;padding:0;margin:0;width:100%;
}
#menubutton {
margin:0;
    padding: 0;
    width:100%;
}

#menubutton li {
    display: inline;
}

#menubutton li a {
    font-family: Arial;
    font-size:11px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background: #2175bc;
    color: #fff;
}

HTML：

<div id="menuspace">
<ul id="menubutton">
<li><a href="http://www.example.net/">Home</a></li>
</ul></div>

【问题讨论】：

什么包含menuspace div？
你具体想创造什么效果？我很困惑。只是一个菜单 DIV，里面有一组按钮？为什么
它是一个菜单...我只是省略了剩余的 7 个
标签，以免在这篇文章中浪费空间。

【解决方案1】：

嗨，您不需要给出宽度，它会自动获取宽度以获取详细信息，请查看我的示例，它很简单：

http://jsfiddle.net/U5JFE/7/

【讨论】：

【解决方案2】：

试试这个小提琴 -

小提琴：http://jsfiddle.net/8LFLd/

演示：http://jsfiddle.net/8LFLd/embedded/result/

注意：我在<a> 标签上添加了悬停，这样看起来更好。

【讨论】：

谢谢好心的专家。我很感激，现在工作正常，必须修复一些其他被拉过的内容，但无论如何都需要完成。

【解决方案3】：

看到这个

http://jsfiddle.net/U5JFE/2/

【讨论】：

【解决方案4】：

至少有两种方法可以解决此问题。

也浮动#menuspace。 (fiddle)
在ul 之后添加一个空的div 并应用float: none; clear: both。 (fiddle)

可能有更多的方法来完成你所追求的（正如上面其他人所建议的那样）。

【讨论】：

没有成功。我放弃了，我只是从某个地方复制粘贴菜单，我讨厌 css。
您遇到的问题是什么浏览器？还是解决方案（在小提琴中有效）在您的代码中不起作用？如果是后者，我们将需要查看您的更多代码，以便找出我们迄今为止发布的解决方案为何不适合您。

【解决方案5】：

将菜单空间的 css 更改为：

#menuspace{ 
    background: #2175bc;padding:0;margin:0;overflow:auto;
}

您遇到此问题的原因是 li 标签上的 float:left。 overflow:auto 在父元素上将清除浮动（或者您可以在 ul 之后添加一个空 div 并将样式设置为 clear:both ）。

【讨论】：

【解决方案6】：

你的#menubutton li a 中有一个浮点数，所以你必须清楚他的父母是#menubutton。所以，写成这样：

#menubutton{
 overflow:hidden;
}

【讨论】：

【解决方案7】：

问题是#menubutton li a 上的“float: left”。删除它，div 将占据屏幕的 100%。浮动使父 div 菜单空间认为其中实际上没有包含任何内容（div 实际上是 100%，但没有高度）。您也可以将浮动留在其中并简单地添加一些内容：

<div id="menuspace">
<ul id="menubutton">
<li><a href="http://www.example.net/">Home</a></li>
</ul>Look the div goes to 100% now</div>

【讨论】：

啊不工作，只是把 li 项目弄得乱七八糟，但是 overflow:hidden 工作，除了现在其他 div 被拉过来了。