箱阴影和溢出：滚动

Question

我使用3个引导面板与面板标题col-md-4，在每个面板的底部我有箱阴影和面板的最大高度为300px。 面板内的文字比面板本身更长。我想为此使用overflow: scroll，但是当我使用overflow: scroll时，它会“覆盖”箱形阴影（其中，我明白为什么）。 我已经搜索了这个看似简单的解决方案一段时间，并没有提出任何事情。

我已排除箱阴影样式和其他两个面板，以保持它在下面清洁。

[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>