Question

我有一个问题，我不知道如何解决它。

具有特定高度的div容器在右侧有一个填充。如果容器的内容太大，我希望滚动条显示在此容器的填充空间中。

HTML

<div class="top-content">
  <div class="inner-content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aenean commodo ligula eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient montes
  </div>
</div>
<div class="bottom-content">
  <div class="inner-content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aenean commodo ligula eget dolor. Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. 
  </div>
</div>

CSS

.top-content {
    padding-right: 20px;
    text-align: justify;
    border: 1px solid #DDD;        
  }
  .inner-content {
    border-right: 1px solid #DDD;       
  }     
  .bottom-content {
    overflow-y: auto;
    text-align: justify;
    height: 100px;
    border: 1px solid #DDD;
    padding-right: 20px;
    margin-bottom: 50px;
  }
  .bottom-content > .inner-content {
    min-height: 100px;
  }

看到这个JsFiddle http://jsfiddle.net/ushLprzd/1/

我希望第二个示例看起来像第一个示例，但是使用滚动条。有谁知道这方面的解决方案？它甚至可能吗？

Answer 1

只需删除text-aling：justify;和padding-right：20px;

或

给予保证金权利：-20px;内部内容

CSS - 在填充中放置滚动条

1 个答案: