blocks|key|596524|text|也许，在css样式表中，一个带有重复的阴影背景图像就能达到这个效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|596525|background-image:url('your-image.jpg');
background-repeat:repeat-y;|code-block|syntax|javascript|596526|您的图像应该是阴影1+1px的高度和更大的需要。您的页眉/页脚可以很容易地隐藏阴影与他们的适当背景。|596527|我看到了你的编辑，这是我的:)|596528|#sidebar+ul+li:hover+{
+background-color:+#C0C0C0;
+color:+#EEE;
+box-shadow:+inset+-7px+0+9px+-7px+rgba(0,0,0,0.7);
}|596529|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Maybe just a shadow background image with a repeat-y could do the trick in your css stylesheet.

<pre><code>background-image:url('your-image.jpg');
background-repeat:repeat-y;
</code></pre>

Your image should be the shadow 1px height and as larger as you need.
Your header/footer can easily hide the shadow with their proper backgrounds.

EDIT
I saw your edit, here is mine :)

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

blocks|key|597920|text|只需将背景色更改为渐变：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|597921|http://jsfiddle.net/anshalexander/h3cp59qd/2/|offset|length|597922|++++background:-webkit-linear-gradient(left,+#c0c0c0+0%25,#c0c0c0+97%25,#555+100%25);+|code-block|syntax|javascript|597923|您可以更改最后一个颜色以匹配您的阴影颜色。|597924|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|19|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

just change your background color to gradient:

<a href="http://jsfiddle.net/anshalexander/h3cp59qd/2/" rel="nofollow">http://jsfiddle.net/anshalexander/h3cp59qd/2/</a>

<pre><code> background:-webkit-linear-gradient(left, #c0c0c0 0%,#c0c0c0 97%,#555 100%); 
</code></pre>

You can change the last color to match your shadow color

blocks|key|1979618|text|看看这个：http://jsfiddle.net/h3cp59qd/3/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1979619|将position:absolute用于sidebar和content|style|CODE|1979620|body,+html+{
++++background:+#D8D8D8;
++++height:+100%25;
++++margin:+0;
++++padding:+0;
}

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

#sidebar+{
++++width:+20%25;
++++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%25;
++++position:+absolute;
++++z-index:+100;
++++left:+20%25;
++++top:+0;
++++bottom:+0;
++++padding:+0+50px;
++++box-shadow:+-7px+0+9px+-7px+rgba(0,0,0,0.7);
}|code-block|syntax|javascript|1979621|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/h3cp59qd/3/^0|5|V|0|0|1|H|K|7|S|7|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]|$A|11|B|12|F|G]|$A|13|B|14|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Check this out: <a href="http://jsfiddle.net/h3cp59qd/3/" rel="nofollow">http://jsfiddle.net/h3cp59qd/3/</a>

Use <code>position:absolute</code> for both <code>sidebar</code> and <code>content</code>:

<pre><code>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);
}
</code></pre>

blocks|key|597948|text|有几件事需要纠正。首先，将padding从#content中移除(这会使宽度混乱，并迫使div位于底部)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|597949|将相同的box-shadow从#sidebar添加到#sidebar+ul+li:hover样式：|597950|#sidebar+ul+li:hover+{
++++background-color:+#C0C0C0;
++++color:+#EEE;
++++box-shadow:+inset+-7px+0+9px+-7px+rgba(0,0,0,0.7);
}|code-block|syntax|javascript|597951|然后在#app上添加position:+absolute和height:+100%25|597952|#app+{
++++width:+100%25;
++++height:+100%25;
++++position:+absolute;
}|597953|最后，在#sidebar上删除min-height:+800px并添加height:+100%25，这将立即修复它。见更新小提琴。|597954|您会注意到，当按钮被悬停时，它会给按钮增加一点边缘。这是由于模糊大于偏移。我认为它看起来不错，但可以通过将x-偏移量和差幅值(+-7s)的绝对值增加到大于模糊半径(+9)来解决，例如：|597955|box-shadow:+inset+-11px+0+9px+-11px+rgba(0,0,0,0.7);|597956|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/h3cp59qd/5/^0|D|7|L|8|18|3|0|4|A|F|8|Q|K|0|0|3|4|A|I|T|C|0|0|4|8|F|H|Z|C|1L|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1R|8|@$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@$9|1Y|A|1Z|1|20]]|E|$]]|$1|S|3|T|5|6|7|21|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|22|8|@]|D|@]|E|$K|L]]|$1|W|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

There are a few things that need to be corrected. First, remove the <code>padding</code> from <code>#content</code> (it's messing up the width and forcing that <code>div</code> to the bottom).

Add the same <code>box-shadow</code> from <code>#sidebar</code> to your <code>#sidebar ul li:hover</code> style:

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

Then on <code>#app</code> add <code>position: absolute</code> and <code>height: 100%</code>:

<pre><code>#app {
 width: 100%;
 height: 100%;
 position: absolute;
}
</code></pre>

Finally, on <code>#sidebar</code> remove <code>min-height: 800px</code> and add <code>height: 100%</code>, and that should fix it right up. See <a href="http://jsfiddle.net/h3cp59qd/5/" rel="nofollow">updated fiddle</a>.

You'll notice that this adds a little bit of an edge to the buttons when they're being hovered over. This is due to the blur being greater than the offset. I think it looks good, but it can be fixed by increasing the (absolute values of) x-offset and spread values (the -7s) to greater than the blur-radius (the 9), e.g.:

<pre><code>box-shadow: inset -11px 0 9px -11px rgba(0,0,0,0.7);
</code></pre>

I have already found an answer, but I am not sure this is the best approach for my problem. My page has two panels: one sidebar and one content view. I want to have a shadow over the sidebar as if the content view was producing it:

<a href="https://i.stack.imgur.com/WYD8M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WYD8M.png" alt="Sidebar and Content View"></a>

The problem is that my sidebar is a menu with buttons, icons, etc. So if I try to set the (inset) shadow there:

<pre><code>.sidebar {
 box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
</code></pre>

I get:

<a href="https://i.stack.imgur.com/m1lfa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m1lfa.png" alt="enter image description here"></a>

So, where I have the buttons, they hide the shadow. If I do it the other way so the content view actually produces it:

<pre><code>.content {
 box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
</code></pre>

I get the shadow along with the content, but if the content is "shorter" than the total height of the screen, the shadow disappears. Similar to the previous case.

My final approach was to set a manual height for the content view or with Javascript, to adapt it to the viewport height. But I am not sure this is the best way to do it. I would like to know if there is a more CSS way to do it, without having to set things manually or getting shadows cut.

<h2>EDIT</h2>

While creating a fiddle for better understanding my problem I realized that I had a <code>background-color</code> on the buttons. But since I have a <code>hover</code> and a <code>transition</code> on the button, it still hides the shadow. Check it out: <a href="http://jsfiddle.net/h3cp59qd/" rel="nofollow noreferrer">http://jsfiddle.net/h3cp59qd/</a>

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经找到了答案，但我不确定这是解决我的问题的最佳办法。我的页面有两个面板:一个侧边栏和一个内容视图。我希望在侧栏上有一个阴影，就好像内容视图正在生成它一样：​​问题是，我的侧边栏是一个带有按钮、图标等的菜单。因此，如果我试图在那里设置(嵌入)阴影：.sidebar {    box-shadow: inset -7p...

问如何在两个面板页面上设置阴影，而不管其高度如何？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在两个面板页面上设置阴影，而不管其高度如何？EN