如何使父元素成为子元素的大小

Question

我在div元素中有iframe：

<div id="toolbarArea" class="toolbarArea"  data-Date="11/2016"> 
            <img id="toolbarTitle" width="15px" height="15px" src="../stdicons/derem/threePoints.png">
            <iframe id="frTools" style="width:94%%;height:90%%;top:0px; position: absolute;" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en" frameBorder="0"></iframe>             
          </div>
.toolbarArea{   
    background-color:#ffffff;
    width:450px; 
    position:relative; 
    z-index:100;
    height:30px;
    border: solid 1px #333;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

我在div 上滚动，如何使父元素的大小为子元素的大小，以防止SCCroll外观。

Answer 1

您可以通过以下方式防止滚动出现：

width: auto;
height: auto;
overflow: hidden;

Answer 2

您需要

使用父级float: left/right或display: inline/inline-block之一，使其宽度与其内容相同

#toolbarArea {
  background-color: #aaa;
  position: relative;
  display: inline-block;
  border: solid 1px #333;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}
#toolbarTitle {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
#frTools {
  width:94%;
  height:90%;
}

<div id="toolbarArea" class="toolbarArea" data-Date="11/2016">
  <img id="toolbarTitle" src="../stdicons/derem/threePoints.png">
  <iframe id="frTools" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en"></iframe>
</div>

---

请注意，您的iFrame css无效，因为94%%必须94%等等。

Answer 3

从类中删除width和height toolbarArea应该可以解决问题：

.toolbarArea {   
  background-color: #ffffff;
  position: relative; 
  z-index: 100;
  border: solid 1px #333;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}