0

我一直试图阻止我的背景图像扩大我的身体高度，但没有成功。我希望仅在内容增加时才扩展正文，而不是我的背景图像。

这是一个代码片段：

body
{
    background-color: #000000;
    color: #FFFFFF;
    font-family: Georgia, Verdana, Geneva, sans-serif;
    overflow-x: hidden;
}

#background_container img
{
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -1250px;
    z-index: -10;
}

<body>



                <div id="background_container">

                    <img src="_images/main_background.jpg" width="2500" height="2003">

                </div>

                <div> 

            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 
            CONTENT GOES HERE 

            </div>

</body>

它应该可以工作，因此只有在我有更多内容时才会扩展正文的高度，并且在这种情况发生之前不会有滚动条。

我根本不想使用任何 javascript。

提前致谢

4

1 回答 1

2

试试这个CSS：

body
{
    background-color: #000000;
    color: #FFFFFF;
    font-family: Georgia, Verdana, Geneva, sans-serif;
    overflow-x: hidden;
}
body > div
{
    background-image: url(_images/main_background.jpg);
    background-position: top center;
}

用这个 html 代替

<body>
        <div> 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        CONTENT GOES HERE 
        </div>
</body>

演示 - 我在演示中使用了一些外部图像，因为我无法猜到您使用什么作为背景。我将 contenteditable 添加到 div 并使用 javascript 将其聚焦，这样您就可以开始输入并查看背景如何随着 div 的大小增长而随着 div 扩展。

于 2012-10-13T01:46:26.420 回答