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

Question

我已经找到了答案，但我不确定这是解决我的问题的最佳方法。我的页面有两个面板：一个 sidebar 和一个 content view。我想在 sidebar 上有一个阴影，就好像 content view 正在生成它一样：

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

.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);
}

我得到了阴影和内容，但是如果内容比屏幕的总高度高 "shorter"，阴影就会消失。与上一个案例类似。

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

编辑

在创建 fiddle 以更好地理解我的问题时，我意识到按钮上有一个 background-color。但是由于我在按钮上有一个 hover 和一个 transition，它仍然隐藏了阴影。检查一下：http://jsfiddle.net/h3cp59qd/

Answer 1

也许只是一个带有 repeat-y 的阴影背景图片就可以在您的 css 样式表中发挥作用。

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

您的图像应该是阴影 1px 高度，并根据需要放大。您的 header/footer 可以轻松地用适当的背景隐藏阴影。

编辑我看到了你的编辑，这是我的:)

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

Answer 2

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

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

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

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

Answer 3

看看这个：http://jsfiddle.net/h3cp59qd/3/

对 sidebar 和 content 使用 position:absolute:

body, html {
    background: #D8D8D8;
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

#sidebar {
    width: 20%;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #C8C8C8;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar ul li {
    padding-left: 20px;
    height: 60px;
    text-transform: uppercase;
    color: white;
    font-weight: 900;
    font-size: 12pt;
    line-height: 60px;
    vertical-align: middle;
}

#sidebar ul li:hover {
    background: #c0c0c0; 
    color: #EEE;
}

#content {
    width: 80%;
    position: absolute;
    z-index: 100;
    left: 20%;
    top: 0;
    bottom: 0;
    padding: 0 50px;
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}

Answer 4

有几处需要更正。首先，从 #content 中删除 padding（它弄乱了宽度并迫使 div 到底部）。

将 #sidebar 中相同的 box-shadow 添加到您的 #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 并添加 height: 100%，这应该可以解决问题。参见 updated fiddle。

您会注意到，当鼠标悬停在按钮上时，这会给按钮增加一点边缘。这是由于模糊大于偏移。我认为它看起来不错，但可以通过将 x 偏移量（的绝对值）和扩散值（-7s）增加到大于模糊半径（9）来解决，例如：

box-shadow: inset -11px 0 9px -11px rgba(0,0,0,0.7);

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

How to set a shadow on a two panels page, regardless of its height?

html

css

box-shadow

编辑