Question

我正在使用带有面板标题col-md-4的3个自举面板，在每个面板的底部我有框阴影，面板的最大高度为300px。面板内的文本比面板本身长。我想使用overflow: scroll，但是当我使用overflow: scroll时，它会覆盖＆＃34;＆＃34;盒子阴影（其中，我理解为什么）。我已经搜索了这个看似简单的解决方案了一段时间，并且没有提出任何建议。

我已经排除了盒子阴影样式和其他两个面板以保持其清洁。

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

盒子阴影和溢出：滚动

1 个答案: