Question

我正在使用bootstrap 3。

这是我的HTML代码

<div class="border-box">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        <div class="padding-top">Record</div>
        <div>Record</div>
        <div>Record</div>
        <div>Record</div>
        <div>Record</div>
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
        <div>record1</div>
        <div>record2</div>
        <div>record3</div>
        <div>record4</div>
        <div>record5</div>
    </div>
</div>

的CSS：

.border-box {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin-left: 15px;
  margin-right: 15px;
  height: 150px;
  margin-bottom: 15px;
  margin-top: 30px;
}

这里我将固定高度设置为框，但是当record5的内容增加时，它开箱即用。我想让它动态地运作。

Answer 1

请参阅此fiddle

HTML

<div class="border-box">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
    <div class="padding-top">Record</div>
    <div>Record</div>
    <div>Record</div>
    <div>Record</div>
    <div>Record</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
    <div>record1</div>
    <div>record2</div>
    <div>record3</div>
    <div>record4</div>
    <div>record5</div>
     <div>record1</div>
    <div>record2</div>
    <div>record3</div>
    <div>record4</div>
    <div>record5</div>
     <div>record1</div>
    <div>record2</div>
    <div>record3</div>
    <div>record4</div>
    <div>record5</div>
     <div>record1</div>
    <div>record2</div>
    <div>record3</div>
    <div>record4</div>
    <div>record5</div>
</div>
</div>

CSS

.border-box {
 border: 1px solid #ddd;
 margin:30px 15px 15px 15px;
 min-height:150px;
 overflow: hidden;
}

Answer 2

HTML

<div class="border-box">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        <div class="padding-top">Record</div>
        <div>Record</div>
        <div>Record</div>
        <div>Record</div>
        <div>Record</div>
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
        <div>record1</div>
        <div>record2</div>
        <div>record3</div>
        <div>record4</div>
        <div>record5</div>
    </div>
</div>

CSS

.border-box{
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin-left: 15px;
  margin-right: 15px;
  height: 150px;
  margin-bottom: 15px;
  margin-top: 30px;
  //this will trigger the overflow
  overflow-y: scroll;

}

Answer 3

只需将height更改为min-height

即可顺便说一句，你可以用更少的行来写这一切：

.border-box {
  border: 1px solid #ddd;
  margin: 30px 15px 15px;
  min-height: 150px;
}

如何创建border arround动态div？

3 个答案: