Question

我知道很多时候都会问这个问题但是没有一个解决方案对我有用。可以看到粗略的基本示例here和方便的视觉指南here。

所以左边的棕色div正在给出问题。它完全是空的，纯粹是装饰性的，除了背景之外什么也没有。（粉红色的很好，它们就像我告诉他们的那样。）显然，对于棕色的div，使高度：100％;仅延伸到浏览器窗口的底部。如果粉红色div的内容使页面滚动，那么棕色不再向下。

尚无效的解决方案

Faux Columns 正如你从方便的视觉指南中看到的那样，我有内容div基本上使它成为一个侧滚动布局 - 目前最多10个div向右延伸大约10,000像素。由于人造柱基本上需要制作包含列的背景图像，并且由于我的背景是图案，因此产生的10,000px宽图像会严重影响加载时间。

指定褐色div的像素高度 内容div不是标准高度。在某些页面上，最长的只是浏览器窗口底部下方几百个像素，而在其他页面上则只有几千个。使棕色div高x千像素覆盖它们都是凌乱和懒惰的，我真的不想诉诸于此。

双背景图片 我在CSS3中找到的东西是你可以为身体背景设置两个背景图像。我几乎得到了它！有没有办法为单独的图像指定确切的细节？（例如设置whitepaper.jpg重复，然后将brownpaper.jpg设置为repeat-y）如果可以这样做，那么我已经知道了，但据我所知，两个图像必须具有相同的属性，这意味着再次使列图像延伸数千个像素，并使其成为.png，使其透明，以便看到背后的白色。

将body和html的高度设置为100％ 什么都没做它实际上破坏了行为粉红色的div。

代码（重要）

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <style type="text/css">
  html, body {height:100%; margin:0; padding:0;}
  body
{
    font-family: conquerorsans, Tahoma, verdana, sans-serif;
    font-size: 18pt;
    color: #9e8166;
    letter-spacing:2px;
    background-color: #e6e0d5;
    background-image:url(images/layout/whitepaper.jpg);
    background-repeat: repeat;
    background-position:top left;
}

  #top-trim
{
    position:absolute;
    left:90px;
    top:0px;
    height:20px;
    width:550px;
    background-image:url(images/layout/brownpaper.jpg);
}

#main-header
{
    position:absolute;
    left:90px;
    top:90px;
    height:100%;
    bottom:0px;
    margin-bottom:0px;
    width:550px;
    background-image:url(images/layout/brownpaper.jpg);
}
  </style>
</head>
<body>

<header id="top-trim">
</header>

<header id="main-header">
</header>

<div style="position:absolute; top:400px; left:700px; width:20px;">
a dsg asd gf asdfg as dfg dfsag df g dfa g afd ga df ga fg a sg a g ag a ga fsa fas dg     a sfdg asd g asd ga dsg adsg as dg as g ar ga rg a g asd ads f asd f dsf asd  dsaf asd f sda fasd f ads fsd  sd dsf asdf a sdgsda f asd a ds fa sdf ads  fads f as d asdf sd a sdf asd f asdf asd f asd f ds fsda f f d ads fad sf  asd asd sd f asd f a f ds asd fa fa ss ad
</div>

</body>
</html>

关于如何修复它的想法 向上和向下滚动时，我可以设置div固定，但是向左和向右滚动吗？

我得出结论，这不能用CSS完成。如果它可以用javascript，jQuery甚至php完成，那么我也会对此持开放态度。虽然我对这三种语言都是全新的，所以请保持温和！

Answer 1

首先，你的例子不起作用

其次，通过给出棕色position:absolute最简单的方法，将它设置为与浮动它相同的方式，补偿边距，并给它的父position:relative。您没有为我提供CSS以便能够根据您的需要重新创建它，但以下演示应该是实现修复所需的全部

Demo Here

Answer 2

我从http://bloogum.net/wp_testing/test1.html注意到文字是在

之外插入的

  <header id="main-header"><div style="width: 20px; left: 700px; top: 400px;">a dsg asd gf asdfg as dfg dfsag df g dfa g afd ga df ga fg a sg a g ag a ga fsa fas dg a sfdg asd g asd ga dsg adsg as dg as g ar ga rg a g asd ads f asd f dsf asd  dsaf asd f sda fasd f ads fsd  sd dsf asdf a sdgsda f asd a ds fa sdf ads  fads f as d asdf sd a sdf asd f asdf asd f asd f ds fsda f f d ads fad sf  asd asd sd f asd f a f ds asd fa fa ss ad

#main-header {
  background-image: url("images/layout/brownpaper.jpg");
  background-repeat: repeat-y;
  bottom: 0;
  display: block;
  left: 90px;
  margin-bottom: 0;
  top: 90px;
  width: 30px;

}

小心使用position：绝对属性和高度不应该是100％尝试使用auto或省略它。

将div扩展到页面底部

2 个答案: