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

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

从类工具toolbarArea删除width和height

.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);
}

Answer 2

您可以使用以下方法防止滚动出现：

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

Answer 3

您需要使用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% ，依此类推。