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中删除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);
}

Answer 2

您可以使用以下方法阻止滚动外观：

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

Answer 3

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

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

请注意，您的iFrame css无效，因为94%%必须为94%，依此类推。

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

3 个答案: