在我开发网页时，我发现了使用框阴影功能的问题。
我想在我的网页的整个包装中添加一个box-shadow，其中包含标题，导航，内容和页脚。
导航和内容是并排元素。
问题是，当我向#wrapper添加box-shadow时，它只显示在标题上，因为我复制了here
我能够通过使用带有display：table-cell propriety的并排元素来修复它，但它破坏了页面的其余部分，所以我问我该如何解决这个问题。
答案 0 :(得分：6)
将overflow:hidden添加到您的包装器中，如图here所示。它会强制你的容器包裹漂浮的元素。
[edit]无需添加额外的标记...
答案 1 :(得分：5)
使用CSS clear:both;因为你是左边的浮动元素，请查看：my fiddle
答案 2 :(得分：0)
而不是包装器，你可以简单地用相同的大小和位置制作另一个单独的包装并给它一个盒子阴影。将高度更改为您想要的任何高度，只需计算出要隐藏的内容的高度。
<style>
div.shadow {
width: 400px;
height: 100%;
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999;
}
</style>
<body>
<div class="shadow></div>
<!-- everything else here-->