Question

我在显示此页面顶部的左右边框图片时遇到问题：

http://www.designated.net.au/testbed/theme/

正如您所看到的，我为左边框图像设置了50px的高度，以向您展示我希望它的外观。但我需要它们都能在100％高度工作。

当主要部门中有任何文字时，双方似乎也存在问题。

任何帮助将不胜感激！

编辑：

修正版：http://www.designated.net.au/testbed/themefixed/

Answer 1

你的#theme-page元素没有高度，因此你将其高度设置为100％的内部每个div都不知道该怎么做，因为100％意味着：＆＃34; 100％包含我的元素＆＃34; 如果您将100％的高度设置为边框，并将主要div（#theme-age）的高度设置为固定或百分比，则会出现边框，因为它们的容器也会有高度。

Answer 2

通过边框替换左右图像更容易，也更加优化。

#theme-header-top {
  position: relative;
  background-color: white;
  border: 10px solid rgb(51, 51, 51);
  border-width: 0 10px;
}

您必须删除宽度：100％才能使其正常工作。实际上它是无用的，因为你的元素是一个块。

Answer 3

首先，顶部区域到底部之间有一些像素间隙当你在div中只有可视内容时，这在css中很常见它发生是因为你需要给出一个font-size：0;到div，否则它有一些额外的高度你无法用正常高度克服：值。

#theme-header-top {
   background-color: #FFFFFF;
   position: relative;
   width: 100%;
   font-size: 0;
}

图像本身（主题标题 - 左下角）是35X35所以当你想要100％高度时我不知道你的意思。
我只能猜到你提到了底部区域和顶部区域之间的差距。

为什么这些CSS背景图片不显示？

3 个答案: