屏幕外的HTML div bg颜色

Question

我想创建一个背景色的<div>元素，它从屏幕中间开始，向右，到页面结尾（屏幕外），但我不想触发任何滚动条。在<div>中，我想在<div>的开头（屏幕内）获得一些信息
这是HTML代码示例：

<div id="footer">
   <h2>Information</h2>
   <p>Some text</p>
   <p class="alignright">Another information in this paragraph.</p>
</div>

这就是我想要的样子：

http://postimage.org/image/h60apjfjf/

Answer 1

CSS可以让您轻松完成这项工作。类似以下内容：

#footer {
   background-color: #b0c4de;
   width: 50%;
   height: 20px;
   float: right;
}

这是一个非常好的资源：http://www.w3schools.com/css/default.asp

Answer 2

你不能只使用身体的css背景图像来实现这种效果吗？

Answer 3

您可以通过将页脚div包装在另一个div中来实现这一点。这不仅可以完全定位页脚div，还可以将页脚div放在外部，而不会生成滚动条或显示溢出。

例如：

<div id="footer-wrapper">
    <div id="footer">
        <h2>Information</h2>
        <p>Some text</p>
        <p class="alignright">Another information in this paragraph.</p>
    </div>
</div>
#footer-wrapper { width:300px; height:100px; position:relative; overflow:hidden; }
#footer { position:absolute: top:50px; left:50%; width:300px; }

等等。

position:relative表示具有position:absolute的页脚div将使用包装作为位置引用。溢出：隐藏将阻止滚动条并隐藏溢出。

Answer 4

您可以这样做：

#footer {
    float: right;
    width: 50%;
    background-color: blue;
    overflow: hidden;
}​

隐藏溢出是不必要的，但如果出现滚动条，就不会了。

编辑：示例：http://jsfiddle.net/8nu68/