CSS内联块问题

我一直在为我的一个朋友的网页设计CSS布局，但遇到了一些问题。也许，你能帮我解决这些问题

第一个问题是，我的css似乎没有确认我的1px bg文件上的“repeat-y”。当我硬编码“height”值时，它是这样做的，但这不是我能做的，因为项目是MVC3，内容是动态生成的。我所做的是运行javascript函数“onload”，测量填充的div，并为有问题的“repeat-y”div设置正确的高度。该解决方案并不完美，因为它加载页面时没有“repeat-y”，并且仅在加载完成时加载，因此存在可见的更改。你对如何使它成为纯CSS有什么想法吗

第二个有点恼人的问题是，当我最终开始显示“repeat-y”时，“inline block”坏了（我猜）。现在看起来像这样：。 所以中间的div被向下推。位移不是恒定的。当我加载一个页面的内容是原来的三倍时，它实际上变小了很多。但我没有改变这是不可接受的事实

现在有一些代码：

HTML:

如果有人感兴趣，这就是JS脚本

function fixHeights(){
    document.getElementById("leftHeight").style.height = document.getElementById("measuredDiv").offsetHeight + "px";
    document.getElementById("rightHeight").style.height = document.getElementById("measuredDiv").offsetHeight + "px";
}

任何帮助都将不胜感激。 谢谢

附言：哦。问题是跨浏览器FF/IE/Ch

JSFIDLE示例：。注意删除JS脚本时会发生什么。内容不会被替换，但不会在左侧和右侧出现阴影

将此添加到css中：

.contentMid:after{
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
} 

---

你知道那一页吗。在那里，您可以使交叉浏览器兼容的css grantient没有背景图像？这可能对你有帮助。你需要什么还不是很清楚。一张它应该是什么样子的图片会有帮助，一个jsiddle的例子会更有帮助。白色的面板不应该分开，侧面的阴影不应该一半结束。很抱歉我以为是奥布沃伊斯。下面是一个屏幕截图，它应该是什么样子：好的。我已经添加了JSFIDLE示例：。是的，侧面阴影不是透明的。如果有命名惯例的话，那就是糟糕透顶。对不起。错误的JSIDLE链接：。注意删除JS脚本时会发生什么。内容没有被替换，但是你不会在左边和右边看到阴影。很抱歉，我应该解释一下，这基本上是做同样的事情：如果放在的结束标记之前，就可以做，而不需要额外的html。它清除所有不可见内容的浮动。

function fixHeights(){
    document.getElementById("leftHeight").style.height = document.getElementById("measuredDiv").offsetHeight + "px";
    document.getElementById("rightHeight").style.height = document.getElementById("measuredDiv").offsetHeight + "px";
}

.contentMid:after{
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}