随着我添加元素，div的高度如何增长？

时间：2017-04-08 00:05:37

标签： html css

任何人都可以告诉我这个div的高度增加是因为我添加了越来越多的文字。我是css的新手，我从一个网站获得了这个div但是我没有＆＃当我添加越来越多的文本时，我希望它的高度增长。请问这样一个蹩脚的问题，但我对此很新，并且我不太了解这些概念

以下是小提琴链接：https://fiddle.jshell.net/nud13xnu/  的CSS：

.full-width1{
width:37%;margin-top:30px;margin-left:10%;min-
height:0px;position:relative;max-height:50px;z-index:0;;
}
.form-style-fake{position:absolute;top:0px;}
.form-style-base{position:absolute;top:0px;z-index:0;;opacity: 0;}
.form-control1{padding: 10px 50px;}
.form-input1{height:50px;border-radius: 0px;margin-top: 20px;}

.truncate {
 width: 250px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
.bg-form1{
float:left;width:100%;
position:relative;
background: url("http://lorempixel.com/200/200/abstract/");
background-repeat: no-repeat;
background-size: cover;
margin-top: 0px;
}
.bg-transparent{
 background: rgba(0,0,0,0.5);float: left;
 width: 100%;margin-top: 0px;
}
.container1{
 background: url("http://lorempixel.com/800/800/nature/");
 background-repeat: no-repeat;
 background-size: cover;
 z-index: 0;
}
custom-form1{float: left;width:100%;border-radius: 20px;box-shadow: 0 0 16px #fff;overflow: hidden;
  margin-top: 30%;
  background: rgba(255,255,255,0.6);
 }
.img-section1{
 float: left;width: 100%;padding-top: 15px;padding-bottom: 15px;background: 
 rgba(0,0,0,0.7);position: relative;
 }
.img-section1 h4{color:#fff;}


.color{
  color:#fff;
 }


 .form-control1::-webkit-input-placeholder {
   color:lightgray;
   font-size:18px;
   }
  .form-control1:-moz-placeholder {
    color:lightgray;
    font-size:18px;
   }
  .form-control1::-moz-placeholder {
    color:lightgray;
    font-size:18px;
   }
  .form-control1:-ms-input-placeholder {
    color:lightgray;
    font-size:18px;
  }

请帮忙。

1 个答案:

答案 0 :(得分：3)

包装列表的div没有指定的高度，因此它会增长以容纳内容。如果您想将其限制在某个高度，请为其指定height或max-height值。结合您已有的overflow-y: scroll，如果内容高度超过父指定的高度，则会滚动它。

我已在内联样式中添加了max-height: 300px，以将其增长限制为300px。

＆＃13;
＆＃13; 
.full-width1 {
  width: 37%;
  margin-top: 30px;
  margin-left: 10%;
  min-height: 0px;
  position: relative;
  max-height: 50px;
  z-index: 0;
  ;
}

.form-style-fake {
  position: absolute;
  top: 0px;
}

.form-style-base {
  position: absolute;
  top: 0px;
  z-index: 0;
  ;
  opacity: 0;
}

.form-control1 {
  padding: 10px 50px;
}

.form-input1 {
  height: 50px;
  border-radius: 0px;
  margin-top: 20px;
}

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-form1 {
  float: left;
  width: 100%;
  position: relative;
  background: url("http://lorempixel.com/200/200/abstract/");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0px;
}

.bg-transparent {
  background: rgba(0, 0, 0, 0.5);
  float: left;
  width: 100%;
  margin-top: 0px;
}

.container1 {
  background: url("http://lorempixel.com/800/800/nature/");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.custom-form1 {
  float: left;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 0 16px #fff;
  overflow: hidden;
  margin-top: 30%;
  background: rgba(255, 255, 255, 0.6);
}

.img-section1 {
  float: left;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  background: rgba(0, 0, 0, 0.7);
  position: relative;
}

.img-section1 h4 {
  color: #fff;
}

.color {
  color: #fff;
}


/*====== style for placeholder ========*/

.form-control1::-webkit-input-placeholder {
  color: lightgray;
  font-size: 18px;
}

.form-control1:-moz-placeholder {
  color: lightgray;
  font-size: 18px;
}

.form-control1::-moz-placeholder {
  color: lightgray;
  font-size: 18px;
}

.form-control1:-ms-input-placeholder {
  color: lightgray;
  font-size: 18px;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="full-width1" style="" id="myModal">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="z-index:0; ">
    <div class="custom-form1" style=" ">
      <div class="text-center bg-form1" style="width: 100%">
        <div class="img-section1">
          <a href="#" class=" glyphicon glyphicon-remove" style=" float: left;margin-left: 5px" onclick="document.getElementById('prof4').style.display='none';"></a>
          <h2 style=" font-family: 'Baskerville';color: white">Create Dummy Profile</h2>
        </div>
      </div>
      <div class="col-lg-12 col-md-12" style="max-height:300px;overflow-y: scroll;">
        <a href="#" style="color:black;font-size: 24px;">
          <h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Bill Gates</a>
        <br/>
        <a href="#" style="color:black;font-size: 24px;">
          <h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> ColdPlay</a>
        <br/>
        <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Adam Levine</a>
        <br/>
        <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Priyanka Chopra</a>
        <br/>
        <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Taylor Swift</a>
        <br/>
        <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Sachin Tendulkar</a>
        <br />
        <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Barack Obama</a>
        <br />
        <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Shahrukh Khan</a>
        <br/>
        <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Barack Obama</a>
        <br />
        <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Barack Obama</a>
        <br> <a href="#" style="color:black;font-size: 24px;"><h5 class=" glyphicon glyphicon-star" style="color: gold"></h5> Barack Obama</a>
        <br>
      </div>
      <div class="text-center bg-form1" style="width: 100%;">
        <div class="img-section1">
          <button class=" btn btn-default" id='myBtn1' style="">Priority</button>
          <button class=" btn btn-default" id='myBtn2' style="margin-left:21px;margin-top: 1%">Work Offline</button>
          <button class=" btn btn-default" id='myBtn3' style="margin-top: 1%;margin-left: 21px">SHARE</button>
          <button class=" btn btn-default" id='myBtn4' style=";margin-top: 1%;margin-left:21px">LEAVE</button>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题