Html 将div扩展到屏幕大小以外_Html_Css

Html 将div扩展到屏幕大小以外

html css

Html 将div扩展到屏幕大小以外,html,css,Html,Css,我的问题特定于背景图像。我将背景图像应用于身体，并将其水平居中。对于每一页，我会在页眉下添加一段，每一段都会有不同的大小。背景图像必须在段落后面流动，但我不能使body标记展开以包含段落，这意味着当你向下滚动时背景图像会被切断。我不想设置特定的高度，因为这样会使页面滚动到段落之外。我尝试了我能想到的位置相对/绝对和高度/分钟高度的每一种组合 <html> <body> <div class="paragraph">

我的问题特定于背景图像。我将背景图像应用于身体，并将其水平居中。对于每一页，我会在页眉下添加一段，每一段都会有不同的大小。背景图像必须在段落后面流动，但我不能使body标记展开以包含段落，这意味着当你向下滚动时背景图像会被切断。我不想设置特定的高度，因为这样会使页面滚动到段落之外。我尝试了我能想到的位置相对/绝对和高度/分钟高度的每一种组合

<html>
    <body>
        <div class="paragraph">
            <p>text!</p>
        </div
</html>

如果有帮助的话，我可以发布一个屏幕截图。

像这样将css添加到正文中

       body {
             background:#fff url(background.jpg) repeat-y top center;
             margin:0px;
             padding:0px;
            }

如果垂直重复不是一个选项，并且你的bg图像当然不能是无休止的，我认为在一些滚动之后不切断图像的唯一方法是固定它的位置：

body {
    background-attachment: fixed;
}

不，可能有另一种解决方案，但在大多数情况下，这看起来不太好：设置

背景大小

，例如：

body {
    background-size: contain;
}

如果你的目标是保持背景的高度足以覆盖段落的大小，并且限制不重复和不扭曲纵横比，那么有一个简单而干净的解决方案在body标记中找到背景。水平尺寸设置为自动，高度设置为100% 正文中包含的段落将推动正文高度，这将推动背景高度，而不会扭曲纵横比

body {
    width:100%; <!-- or what ever.....-->
    background:url("whatever.jpg") no-repeat;
    background-size:auto 100%;
}

正文{
宽度：100%；
背景：url（“whatever.jpg”）不重复；
背景尺寸：自动100%；
}

这是给你的礼物。我使用了维基百科的图片。使用它修改段落的数量等。。。希望它能帮助您解决问题。请给我看一张小提琴或屏幕截图？为什么不试试整页背景图片？这里是一个参考资料，我不知道如何使用JSFIDLE，但这里有一些屏幕截图。用我的小提琴。只需点击我回答中的链接哦，对不起，我应该补充说垂直重复不是一个选项。当你向下滚动时，背景图像会消失，但是谢谢。我真的需要一种方法，要么使溢出可见，要么扩展div以包含段落。谢谢，问题是它大幅调整了图像的大小，这样它就不会超出屏幕大小，但我现在正在玩它，看看当它更大时，你是否能看到溢出。

body {
    width:100%; <!-- or what ever.....-->
    background:url("whatever.jpg") no-repeat;
    background-size:auto 100%;
}