扩大div超出屏幕尺寸

我的问题是特定于背景图片。我已经将背景图像应用于身体并水平居中。对于每个页面，我将在标题下添加一个段落，并且每个页面的大小都会不同，从而导致滚动。背景图片必须在段落后面流动，但我无法让身体标记展开以包含段落，这意味着向下滚动时背景图片会被切掉。我不想设置特定的高度，因为这会使页面滚动到段落之外。我已经尝试了几乎所有可以考虑的位置相对/绝对和身高/高度的组合。扩大div超出屏幕尺寸

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

CSS

html { 
    background:    url('/images/bg.png'); 
    margin:     0; 
    padding:    0; 
    height:     100%; 
    min-height:    100%; 
} 

body { 
    margin:     0; 
    padding:    0 0 50px 0; 
    background-image:  url('../images/fullheader.gif'); 
    background-position: center 20px; 
    background-repeat:  no-repeat; 
    position:    absolute; 
    top:     0px; 
    bottom:     0px; 
    right:     0px; 
    left:     0px; 
    min-height:    100%; 
} 

.paragraph { 
    width:     640px; 
    padding:    10px 20px; 
    margin:     400px auto 0 auto; 
    min-height:    100%; 
}

我可以张贴的屏幕截图是否有帮助。

来源

2013-04-24 user1809388

请创建一个[小提琴]（http://jsfiddle.net）你的问题。 – 2013-04-24 12:05:34

给我看一个小提琴或屏幕截图？ – 2013-04-24 12:34:27

为什么不尝试整页背景图像这里是一个参考http://css-tricks.com/perfect-full-page-background-image/ – 2013-04-24 12:35:18

新增CSS身体像这样

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

来源

2013-04-24 12:01:52

对不起，我应该补充说，垂直重复不是一个选项。 – user1809388 2013-04-24 12:08:23

如果垂直重复不是一个选项，你的课程背景图片不能是无止境的，我觉得不切断图像的唯一方法后一些滚动是固定它的位置：

body { 
    background-attachment: fixed; 
}

没有，有可能是另一种解决方案，但在大多数情况下，这不会看起来很好：设置background-size，如：

body { 
    background-size: contain; 
}

来源

2013-04-24 12:14:50

当您向下滚动时，背景图像会消失，但谢谢。我真的需要一种方法来使溢出可见或扩大div以包括段落。 – user1809388 2013-04-24 12:25:22

@ user1809388，请创建您的问题的http://jsfiddle.net。 – 2013-04-24 12:28:48

如果你的目标是保持与身高足够的背景，以支付您的段落，并用，但不得重复和不能扭曲方面无线电有一个简单而干净的解决方案尺寸找到在后台身体标签。设置其大小为auto水平尺寸和高度段落100％，为包含由本体将推动体高度，这将推动你的背景高度而不宽高比

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

的失真这里是你的fiddle。我使用了一个维基百科图像。玩它修改段落数量等...希望它可以帮助

来源

2013-04-24 12:32:35 Fico

谢谢，这个问题是因为它大大地调整了图像的大小，所以它不会超出屏幕大小，但是现在我正在玩弄它，看看它是否可以在较大时看到溢出。 – user1809388 2013-04-24 13:04:46

扩大div超出屏幕尺寸

回答

相关问题