1

请看截图。我正在尝试生成一个布局，允许我使用 div 左侧（headerLeft）和右侧（headerRight）将阴影应用到主 div 的任一侧，然后我拥有包含标题内容的内容 div（header）。这一切都包装在一个 div（headerWrapper）中。我正在使用 4 个 div 来执行此操作。我让它在我的标题、导航栏和我正在使用的另一个栏上工作。这在屏幕截图上以颜色编码的 div 显示。之所以可行，是因为我的 CSS 使用以像素为单位的高度。但是我有问题。我想将此应用于我的主要内容，但它不起作用。内容的高度会随着页面的变化而变化，这很好，但是我的包含阴影的 div 不会出现，除非我给它们一个固定的像素高度。请帮忙。

布局问题 http://www.webquark.co.uk/layoutProblem.jpg

这是我为工作布局所拥有的 CSS：

    #header{
margin:0 auto; 
height:160px;
width: 76%;
min-width:850px;
font-size: 14pt;
font-family: Calibri, Verdana, Ariel, sans-serif;
color: #ffffff;
background-image: url(headerBG.jpg);
background-repeat: repeat-x; 
}

#headerWrapper{
height:145px;
width:100%;
/**background-color: #202020;**/
}

#headerLeft
{
float: left;
width: 12%;
height:145px;
background-image: url(shadowLeft.png);
background-repeat: repeat-y;
background-position: center right;
/**background-color: #1e1e1e;**/
}

#headerRight
{
float: right;
width: 12%;
height:145px;
background-image: url(shadowRight.png);
background-repeat: repeat-y;
background-position: center left;
/**background-color: #1e1e1e;**/
}

基本上我认为我需要将左右 div 的高度设置为 100%，我尝试将高度设置为 100%，但它不起作用。我的身高也设置为 100%

加油，希望能帮到你。

工作顶栏和标题的 HTML：

<div id="topWrapper">
<div id="topRight">
</div>
<div id="topLeft">
</div>
<div id="top">
</div>
</div>


 <div id="headerWrapper">
 <div id="headerRight">
</div>
<div id="headerLeft">
</div>
 <div id="header">
 </div>
 </div>
4

2 回答 2

0

使用 CSS 很难让 div 匹配高度。这样做有一些技巧，但我认为这里有一个更简单的解决方案。

为什么不将红色图案作为身体背景图像并将其平铺？如果您想显示其他内容，只需将其放在顶部即可。从我对您的设计的了解来看，这对我来说似乎是最简单的解决方案。

如果您确实想尝试让 div 匹配高度，我建议使用绝对列技巧。我认为这样的事情会起作用：（虽然我还没有实际测试过。）

<div id="content">
    <div id="left-shadow"></div>
    <div id="text">
        text goes here
    </div>
    <div id="right-shadow"></div>
</div>

使用这个 CSS：

#content {
    position: absolute;
}
    #left-shadow {
        position: relative;
        left: 0; top: 0; bottom: 0;
        /* width needs to be specified */
    }
    #text {
        /* width needs to be specified */
    }
    #right-shadow {
        position: relative;
        right: 0; top: 0; bottom: 0;
        /* width needs to be specified */
    }

然后将图案设置为左/右阴影的背景图像。

于 2009-08-13T14:54:11.377 回答
0

我会为阴影使用透明的PNG，1px高。它将包含左侧的阴影，然后是内容/标题宽度的空白区域，然后是右侧阴影。在下面的示例中，这将是 1x932 像素。

示例代码：

<style type="text/css">
  #headerBG {
    background: gray url("repeating-background");
  }
  #contentBG {
    background: red url("repeating-background");
  }
  .shadow {
    width: 900px; /* width of inner content */
    margin: 0 auto;
    padding: 0 16px; /* width of shadow bit */
    background: transparent url("new-shadow") repeat-y;
  }
</style>

<div id="headerBG">
  <div class="shadow">
    header content
  </div>
  <div class="shadow">
    navigation
  </div>
</div>

<div id="contentBG">
  <div class="shadow">
    body content
  </div>
</div>

对于标题/正文上的不同背景颜色，您需要在阴影内（内容周围）添加一个额外的 div，或者创建多个阴影图像，其中中间的空白位包含正确的背景颜色。但是，如果您使用单独的图像填充标题，您可能只使用主体颜色就可以逃脱 - 标题将覆盖它。

于 2009-08-13T15:20:05.063 回答