0

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

我已经排除了 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/
4

1 回答 1

0

尝试使用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>

于 2015-10-03T06:38:26.673 回答