滚动条切割圆形边缘

时间：2017-01-13 06:58:51

标签： html css

我有一个div，它添加了一个滚动条。我的div for div如下所示。

<div class="col-lg-3 col-md-3 col-sm-3">
  <div class="chat-box-new-div">
    <div class="chat-box-new-head">Frequently Asked Questions ..
    </div>
    <div class="panel-body chat-box-new">
      <ul class="questionsUl">
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>

      </ul>
    </div>
  </div>
</div>

我面临的问题是创建了一个滚动条，当边缘笔直时没有问题。我将边缘弄圆了，滚动条从底部出来。

这是我创造的工作小提琴https://jsfiddle.net/cp751fu5/

请告诉我如何解决此问题。

由于

4 个答案:

答案 0 :(得分：0)

你需要给.chat-box-new-div

添加一些填充

答案 1 :(得分：0)

更改代码，如下所示添加行到.chat-box-new-div：

padding: 0 0 37px;

（在小提琴上测试）

希望这会有所帮助：）

答案 2 :(得分：0)

只需添加padding-bottom:35px;，如下所示

.chat-box-new-div {
  height: 502px;
  border: 2px solid #157DEC;
  border-bottom: 2px solid #157DEC;
  overflow: hidden;
  border-radius: 3.4em;
  padding-bottom:35px;
}

<强>演示

＆＃13;
＆＃13; 
@media (min-width: 1200px) .col-lg-3 {
  width: 25%;
}

.chat-box-new-div {
  height: 502px;
  border: 2px solid #157DEC;
  border-bottom: 2px solid #157DEC;
  overflow: hidden;
  border-radius: 3.4em;
  padding-bottom:35px;
}

.chat-box-new-head {
  padding: 10px 15px;
  border-bottom: 2px solid #157DEC;
  background-color: #157DEC;
  color: #fff;
  text-align: center;
  border-top-left-radius: 4em;
  border-top-right-radius: 4em;
}

.chat-box-new {
  overflow-y: scroll;
  height: 461px;
}

.questionsUl {
  margin-left: -20px;
}
＆＃13; 
<div class="col-lg-3 col-md-3 col-sm-3">
  <div class="chat-box-new-div">
    <div class="chat-box-new-head">Frequently Asked Questions ..
    </div>
    <div class="panel-body chat-box-new">
      <ul class="questionsUl">
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>
        <li>Who is a public official?&nbsp;</li>
        <li>My client asked if her son can intern with the company as a favor to her, that isn't a problem is it?&nbsp;</li>
        <li>My friend works for the client, does that mean I can't give her a gift?&nbsp;</li>
        <li>Is there certain criteria for gifts and entertainment&nbsp;</li>
        <li>How do I know if Gift or Entertainment is permissible?&nbsp;</li>
        <li>can I give gift cards to my team?&nbsp;</li>
        <li>Do I need approval to give a gift?&nbsp;</li>
        <li>Are Facilitating Payments” to Public Officials allowed?&nbsp;</li>
        <li>is there approval needed for gifts to public officials?&nbsp;</li>

      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

在var conn = await injector.get(Connection); var res = await conn.query("select 1").toList(); 类

中添加底部填充 
.chat-box-new-div

.chat-box-new-div {
  height: 502px;
  border: 2px solid #157DEC;
  border-bottom: 2px solid #157DEC;
  overflow: hidden;
  border-radius: 3.4em;
  padding-bottom:30px;
}

@media (min-width: 1200px) .col-lg-3 {
  width: 25%;
}

.chat-box-new-div {
  height: 502px;
  border: 2px solid #157DEC;
  border-bottom: 2px solid #157DEC;
  overflow: hidden;
  border-radius: 3.4em;
  padding-bottom:30px;
}

.chat-box-new-head {
  padding: 10px 15px;
  border-bottom: 2px solid #157DEC;
  background-color: #157DEC;
  color: #fff;
  text-align: center;
  border-top-left-radius: 4em;
  border-top-right-radius: 4em;
}

.chat-box-new {
  overflow-y: scroll;
  height: 461px;
}

.questionsUl {
  margin-left: -20px;
}

相关问题
最新问题