Question

我的网站存在问题。我希望阴影在文本框的末尾停止。

ShadowProblem http://i39.tinypic.com/k37o6h.jpg

HTML

<body>
<div id="shadow" class="floatfix">

<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">

这是我的CSS代码：

#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}

#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}

#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}

#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}

#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}

#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}

#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}

我认为我有这个问题，因为“身高：100％”。但我不知道如何解决它。

提前致谢文森特

Answer 1

有一种更简单的方法可以做到这一点。制作一个960px宽，10px高的新背景图像，在它的两侧都有阴影。（您可能需要调整宽度以在中间获得920px的白色，并在两侧留下阴影）

使用#shadow div在#content周围添加背景，例如：

#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}

或者你可以通过向#content添加min-height: 100%;和IE6 hack来延长你的* html #content { height: 100%; } div：

{{1}}

Answer 2

100％阴影高度没有高度可以计算100％，所以它使用自动模式。所以到目前为止，我看到了解决问题的3种方法，但它们都不是很好，因为它应该是：

在父div上设置固定高度（如果内容扩展，则）

使用3x3表（但人们再次说不使用表格进行布局）

使用双面阴影背景图像填充内容div。 1px高度974px宽度bg图像，带有repeat-y; （如果网站宽度发生变化，不是很优雅）

Answer 3

id说你的HTML错了。自我关闭div的不良做法

将它们包裹在您的内容周围，并使用负边距和背景位置来获得跨越流体内容高度的正确效果

这有点sudo，因为它从我的另一个网站上撕掉了，但是应该告诉你应该怎么做的基础

<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>


    #header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}

#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}

#header .inner {
background-color:#FFFFFF;
}

CSS / HTML阴影问题

3 个答案: