为什么我的包含div的背景颜色不会穿过页面？

Question

请考虑以下事项：http://jsfiddle.net/MgZ7n/10/

我希望整个高清以蓝色突出显示。这是从左边的内容一直到正确的内容。如何在不将hd元素的宽度设置为100％的情况下实现这一目标。

注意：将宽度设置为100％会导致Chrome中出现一个奇怪的错误，如果浏览器设置为全屏，则右边元素的内容最终会向右流出，部分内容最终会在屏幕外显示。

谢谢！

Answer 1

这个怎么样（如果你真的需要固定位置，没有宽度100％）：

#hd {
    background-color:blue;
    position:fixed;
    right: 0;
    left: 0;
}

http://jsfiddle.net/MgZ7n/17/

Answer 2

我做了这个简单的改变：

#hd
{
    background-color:blue;
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#right
{
    float:right;
    margin-right: 10px;
}

到#HD和镀铬我没有看到流血。这是我的jsFiddle

我也改变了你的span id="right"，因为你漂浮它并将它设置为固定位置。那种相互覆盖（我假设位置获胜）。一个解决方案是给它浮动：右边和边距右：10px。

Answer 3

从css中的hd样式中删除固定位置

#hd
{
    background-color:blue;
    /*position:fixed;*/
}

*注意：你的小提琴中有一个拼写错误，在CSS部分#left，＃center样式表示fload而不是float

Answer 4

删除位置：从css中的#hd修复。蓝色将完全延伸。

Answer 5

我将css更改为以下内容以修复您的问题（删除了#hd上的固定位置并删除了fload拼写错误）：

#hd
{
    background-color:blue;
}
#left, #center
{
    float:left;
}
#right
{
    float:right;
    position:fixed;
    right:10px;
    top:0px;
}

我不确定这个布局的目的是什么，但我认为它可用于一些改进。

我建议在3个内容列中使用div而不是span。

当使用div元素时，您可以根据需要设置div的样式，然后将内容放在这些div中。使用你的css，你可以使用float或display: inline-block

将你的内容div很好地放在彼此旁边