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背景图像来实现这种效果吗？

Answer 2

你可以这样做：

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

隐藏溢出不是必需的，但如果出现滚动条，则不会。

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

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表示footer div，position：absolute，将使用包装器作为位置引用。溢出：隐藏将阻止滚动条并将隐藏溢出。

Answer 4

CSS可以让您轻松完成此操作。如下所示：

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

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

屏幕上的HTML div bg颜色

4 个答案: