stack stack - 3 months ago 9
CSS Question

How can I put two elements inside one without any overflow?

Here is my code:



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





Explanation:

As you see,
div.child
element is out of view and the word of
six
isn't visible now. How can I fix it?

Actually that's because of the height of that
span
. The
height
of
div.child
is
100%
, so its
height
will be the same as
div.parent
. While there is a
span
in the top of
div.parent
and then undoubtedly the
height
of
div.child
should be less than
100%
.




Note1: I can fix the problem by using
box-sizing: border-box;
for
div.child
. But I don't want to use it. Because the most of my website's users use old browsers like IE7.

Note2: As I've commented in the snippet above, the height of
div.main
is based on
%
. So I cannot use
calc()
at all, because there isn't anything based on the pixel. Also
calc()
will not be supported on the old browsers.

Note3: The final
height
of
div.main
should be
100px
, not more.

Answer

Use "calc"

  • The span view's height = 30px
  • The .child view's:
    • border = 1px * 2 = 2px (top and bottom)
    • padding-bottom = 4px
    • padding-top = 4px
    • margin-top = 1px
  • The .parent view's border = 1px * 2 = 2px (top and bottom)

Replace:

.child view's height must be:

Height = 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);
}

Result:

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

Edit 1:

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

Edit 2:

Highlight changes.

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