如何在两个面板页面上设置阴影，无论其高度如何？

Question

我已经找到了答案，但我不确定这是解决我问题的最佳方法。我的页面有两个面板：一个侧边栏和一个内容视图。我希望在侧边栏上留下阴影，就像内容视图正在制作它一样：

问题是我的侧边栏是一个带有按钮，图标等的菜单。所以如果我尝试在那里设置（插入）阴影：

.sidebar {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}

我明白了：

所以，在我有按钮的地方，他们隐藏了阴影。如果我这样做，那么内容视图实际产生它：

.content {
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}

我得到阴影和内容，但如果内容是＆＃34;更短＆＃34;比屏幕的总高度，阴影消失。与之前的案例类似。

我的最后一种方法是为内容视图或使用Javascript设置手动高度，以使其适应视口高度。但我不确定这是最好的方法。我想知道是否有更多的 CSS 方法，无需手动设置或剪切阴影。

修改

虽然为了更好地理解我的问题而创造了一个小提琴，但我意识到按钮上有一个background-color。但由于按钮上有hover和transition，因此它仍隐藏阴影。看看：http://jsfiddle.net/h3cp59qd/

Answer 1

检查出来：http://jsfiddle.net/h3cp59qd/3/

对var nodeMap = {}; json.nodes.forEach(function(x) { nodeMap[x.sId] = x; }); json.links = json.links.map(function(x) { return { source: nodeMap[x.source], target: nodeMap[x.target] }; }); 和position:absolute使用sidebar：

content

Answer 2

也许只有带有repeat-y的阴影背景图像可以在你的css样式表中完成这个技巧。

background-image:url('your-image.jpg');
background-repeat:repeat-y;

你的图像应该是1px高度的阴影，并且可以根据需要增大。 您的页眉/页脚可以轻松隐藏具有适当背景的阴影。

修改 我看到你的编辑，这是我的：）

#sidebar ul li:hover {
 background-color: #C0C0C0;
 color: #EEE;
 box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}

Answer 3

只需将背景颜色更改为渐变：

http://jsfiddle.net/anshalexander/h3cp59qd/2/

    background:-webkit-linear-gradient(left, #c0c0c0 0%,#c0c0c0 97%,#555 100%); 

您可以更改最后一种颜色以匹配阴影颜色

Answer 4

有一些事情需要纠正。首先，从padding中移除#content（它会弄乱宽度并强制div到底部。）

将box-shadow的{​​{1}}添加到#sidebar样式：

#sidebar ul li:hover

然后在#sidebar ul li:hover { background-color: #C0C0C0; color: #EEE; box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7); } 添加#app和position: absolute：

height: 100%

最后，在#app { width: 100%; height: 100%; position: absolute; } 移除#sidebar并添加min-height: 800px，这应该立即解决。请参阅updated fiddle。

您会注意到，当它们悬停在按钮上时，这会给按钮增加一点优势。这是由于模糊大于偏移。我认为它看起来不错，但可以通过将x-offset和扩展值（-7s）的（绝对值）增加到大于blur-radius（9）来修复，例如：

height: 100%