2

我知道这已经被问过很多次了，但是给出的解决方案都没有对我有用。可以在此处查看粗略的基本示例，并在此处查看方便的视觉指南。

所以是左边的棕色 div 给出了问题。它完全是空的，纯粹是装饰性的，除了背景什么都没有。（粉红色的很好，它们完全按照我说的做。）显然，对于棕色 div，将高度设为：100%；只延伸到浏览器窗口的底部。如果粉红色 div 的内容使页面滚动，则棕色不会进一步向下移动。

没有奏效的解决方案

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

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

双背景图片 我在 CSS3 中发现的一点是，您可以为身体背景设置两个背景图片。我几乎受够了这个！有没有办法为单独的图像指定确切的细节？（例如，将 whitepaper.jpg 设置为重复，然后将 brownpaper.jpg 设置为仅重复-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 完成，那么我也愿意接受。不过，我对这三种语言是全新的，所以请温柔一点！

4

2 回答 2

0

首先你的例子不起作用

其次，这将是最容易做到的，方法是给 brown position:absolute，以与浮动它相同的方式设置它，补偿边距，并给它的 parent position:relative。您没有为我提供 CSS 以便能够完全按照您想要的方式重新创建它，但是下面的演示应该是实现修复所需的全部内容

在这里演示

于 2013-11-02T17:54:48.937 回答
0

我从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:absolute 属性和 height 不应该是 100% 尝试使用 auto 或省略它。

于 2013-11-03T04:54:58.347 回答