html - 框阴影和溢出 : scroll

Question

我正在使用 3 个带有面板标题 col-md-4 的 Bootstrap 面板，在每个面板的底部我都有框阴影，面板的最大高度为 300 像素。面板内的文本比面板本身长。我想为此使用 overflow: scroll 但是当我使用 overflow: scroll 时，它“覆盖”了 box-shadow (其中，我明白为什么)。我已经搜索了一段时间这个看似简单的解决方案，但一无所获。

我已经排除了 box-shadow 样式和其他两个面板以保持其下方干净。

    [Fiddle][1]

       .sub-content-panel {
        height: 400px;
        border-radius: 5px;
        position: relative;
        color: black;
        }

        <div class="col-md-4 text-border">
        <a href="gallery.php">
            <div class="panel panel-default sub-content-panel">
                <div class="panel-heading sub-content-panel-heading">
                    <p><i class="fa fa-commenting-o"></i>About us</p>
                </div>
                <div class="panel-body">
                    <p>with 35 years experience as a furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis contributes his knowledge of construction techniques and materials, experience in whole house renovations, and his skill in kitchen and bath remodels. Together our focus is on customer satisfaction, quality workmanship, attention to detail and inspired solutions. It is a priority for Naso Remodel to yield as little impact on the customers environment as possible while work is in progress.</p>
                </div>
            </div>
        </a>      
    </div>

   .sub-content-panel:before, .sub-content-panel:after{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    }

    .sub-content-panel:after{

    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
    }


  [1]: https://jsfiddle.net/2jufan88/

Answer 1

尝试使用 overflow-y: auto;。

body, html {
  margin: 10px;
}
.panel.panel-default.sub-content-panel {
  max-height: 400px;
  border-radius: 5px;
  position: relative;
  color: black;
  overflow-y: auto;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 text-border">
  <a href="gallery.php">
    <div class="panel panel-default sub-content-panel">
      <div class="panel-heading sub-content-panel-heading">
        <p><i class="fa fa-commenting-o"></i> About us</p>
      </div>
      <div class="panel-body">
        <p>with 35 years experience as a furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements,
          and knowledge of wood. Curtis contributes his knowledge of construction techniques and materials, experience in whole house renovations, and his skill in kitchen and bath remodels. Together our focus is on customer satisfaction, quality workmanship,
          attention to detail and inspired solutions. It is a priority for Naso Remodel to yield as little impact on the customers environment as possible while work is in progress with 35 years experience as a furniture designer and builder, and his
          son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis contributes his knowledge of construction
          techniques and materials, experiencessible while work is in progress with 35 years experience as a furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes
          his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis contributes his knowledge of construction techniques and materials, experiencessible while work is in progress with 35 years experience as a
          furniture designer and builder, and his son Curtis, with 15 years of remodeling experience, have combined their talents in Remodel. contributes his business skills, practiced sense of aesthetics, creative elements, and knowledge of wood. Curtis
          contributes his knowledge of construction techniques and materials, experience in whole house renovations, and his skill in kitchen and bath remodels. Together our focus is on customer satisfaction, quality workmanship, attention to detail and
          inspired solutions. It is a priority for Naso Remodel to yield as little impact on the customers environment as possible while work is in progress.</p>
      </div>
    </div>
  </a>
</div>