如何在没有溢出的情况下将两个元素放在一个元素中？

Question

这是我的代码：

.main{
  border:1px solid black;
  width: 100px;
  height: 100px;   /* in reality this isn't based on the pixel, it is % */ 
}

.parent{
    border:1px solid blue;
    position: relative;
  	overflow:hidden;
  	height: inherit;
  	width: inherit;
}

.child{
    border:1px solid red;
  	margin-top: 1px;
	padding: 4px 8px 30px 7px;
	overflow: scroll;
	height: 100%;
}

span{
  	color: #222;
	display: block;
	font-size: 13px;
	line-height: 30px;
	padding-bottom: 1px;
	text-align: center;
	font-family: BYekan,'BYekan', Tahoma;
	background-color: #F7F7F7;
}

<div class="main">
  <div class="parent">
    <span>title</span>
    <div class="child">
      one<br> two<br> three<br> four<br> five<br> six<br>
    </div>
  </div>
</div>

解释

如您所见，div.child元素不在视野范围内，six的单词现在不可见。我该如何解决？

实际上那是因为span的高度。 height的{​​{1}}为div.child，因此其100%与height相同。虽然div.parent顶部有span，但毫无疑问，div.parent的{​​{1}}应小于height。

注1：我可以使用div.child 100%解决问题。但我不想用它。因为我网站的大多数用户都使用IE7这样的旧浏览器。

注2：正如我在上面的代码段中所评论的那样，box-sizing: border-box;的高度基于div.child。所以我根本不能使用div.main，因为基于像素没有任何东西。旧浏览器也不支持%。

注3： calc()的最终calc()应为height，而不是更多。

Answer 1

使用“calc”

• span 视图的高度= 30px
• .child 视图：
  • border = 1px * 2 = 2px （顶部和底部）
  • padding-bottom = 4px
  • padding-top = 4px
  • margin-top = 1px
• .parent 视图的边框= 1px * 2 = 2px （顶部和底部）

替换：

.child 视图的高度必须为：

  

高度= 100％ - （30 + 2 + 4 + 4 + 1 + 2）

.child{
    border:1px solid red;
    margin-top: 1px;
    padding: 4px 8px 4px 7px;
    overflow: scroll;
    height: calc(100% - 43px);
}

结果：

.main{
  border:1px solid black;
  width: 100px;
  height: 100px;   /* in reality this isn't based on the pixel, it is % */ 
}

.parent{
  border:1px solid blue;
  position: relative;
  overflow:hidden;
  height: inherit;
  width: inherit;
}

.child{
  border:1px solid red;
  margin-top: 1px;
  padding: 4px 8px 4px 7px;
  overflow: scroll;
  height: calc(100% - 42px);
}

span{
  color: #222;
  display: block;
  font-size: 13px;
  line-height: 30px;
  padding-bottom: 1px;
  text-align: center;
  font-family: BYekan,'BYekan', Tahoma;
  background-color: #F7F7F7;
}

<div class="main">
  <div class="parent">
    <span>title</span>
    <div class="child">
      one<br> two<br> three<br> four<br> five<br> six<br>
    </div>
  </div>
</div>

编辑1：

不使用calc（）

.main{
  border:1px solid black;
  width: 100px;
  height: 100px;   /* in reality this isn't based on the pixel, it is % */ 
}

.parent{
  border:1px solid blue;
  position: relative;
  overflow:hidden;
  height: inherit;
  width: inherit;
}

.child{
  border:1px solid red;
  margin-top: 1px;
  padding: 4px 8px 4px 7px;
  overflow: scroll;
  position:absolute;
  top:0;
  bottom: 0;
  width:100%;
  margin-top:30px;
}

span{
  color: #222;
  display: block;
  font-size: 13px;
  line-height: 30px;
  padding-bottom: 1px;
  text-align: center;
  font-family: BYekan,'BYekan', Tahoma;
  background-color: #F7F7F7;
}

<div class="main">
  <div class="parent">
    <span>title</span>
    <div class="child">
      one<br> two<br> three<br> four<br> five<br> six<br>
    </div>
  </div>
</div>

编辑2：

突出显示更改。

.main{
  border:1px solid black;
  width: 100px;
  height: 100px;   /* in reality this isn't based on the pixel, it is % */ 
}

.parent{
  border:1px solid blue;
  position: relative;
  overflow:hidden;
  height: inherit;
  width: inherit;
}

.child{
  border:1px solid red;
  margin-top: 1px;

  /* removed */  padding: 4px 8px 30px 7px;
  /*  added  */  padding: 4px 8px 4px 7px;

  overflow: scroll;

  /* removed */  height: 100%;
 
  /*  added  */  position:absolute;
  /*  added  */  top:0;
  /*  added  */  bottom: 0;
  /*  added  */  width:100%;
  /*  added  */  margin-top:30px;
}

span{
  color: #222;
  display: block;
  font-size: 13px;
  line-height: 30px;
  padding-bottom: 1px;
  text-align: center;
  font-family: BYekan,'BYekan', Tahoma;
  background-color: #F7F7F7;
}

<div class="main">
  <div class="parent">
    <span>title</span>
    <div class="child">
      one<br> two<br> three<br> four<br> five<br> six<br>
    </div>
  </div>
</div>

只需删除PREFIX / *删除的行* /

.main{
  border:1px solid black;
  width: 100px;
  height: 100px;   /* in reality this isn't based on the pixel, it is % */ 
}

.parent{
  border:1px solid blue;
  position: relative;
  overflow:hidden;
  height: inherit;
  width: inherit;
}

.child{
  border:1px solid red;
  margin-top: 1px;

  /* removed   padding: 4px 8px 30px 7px;*/
  /*  added  */  padding: 4px 8px 4px 7px;

  overflow: scroll;

  /* removed   height: 100%;*/
 
  /*  added  */  position:absolute;
  /*  added  */  top:0;
  /*  added  */  bottom: 0;
  /*  added  */  width:100%;
  /*  added  */  margin-top:30px;
}

span{
  color: #222;
  display: block;
  font-size: 13px;
  line-height: 30px;
  padding-bottom: 1px;
  text-align: center;
  font-family: BYekan,'BYekan', Tahoma;
  background-color: #F7F7F7;
}

<div class="main">
  <div class="parent">
    <span>title</span>
    <div class="child">
      one<br> two<br> three<br> four<br> five<br> six<br>
    </div>
  </div>
</div>

Answer 2

让孩子div变小

＆＃13;

＆＃13;

.main{
  border:1px solid black;
  width: 100px;
  height: 100px;   /* in reality this isn't based on the pixel, it is % */ 
}

.parent{
    border:1px solid blue;
    position: relative;
  	overflow:hidden;
  	height: inherit;
  	width: inherit;
}

.child{
    border:1px solid red;
  	margin-top: 1px;
	padding: 4px 8px 30px 7px;
	overflow: scroll;
	height: 50%; /*make it smaller*/
}

span{
  	color: #222;
	display: block;
	font-size: 13px;
	line-height: 30px;
	padding-bottom: 1px;
	text-align: center;
	font-family: BYekan,'BYekan', Tahoma;
	background-color: #F7F7F7;
}

＆＃13;

<div class="main">
  <div class="parent">
    <span>title</span>
    <div class="child">
      one<br> two<br> three<br> four<br> five<br> six<br>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;