Implement a specific size for a div

Question

Implement a specific size for a div

Navigation

#1 by (0 votes)

1

I'm wanting my table to be the same size as the div containing my iframe. It is possible? If so, what am I doing wrong?
obs: I am putting in the post the parts of my code that affect the div that contains the iframe and my javascript implementation to be the same size in the table.

var tableheight = document.getElementsByTagName("video-wrapper").offsetHeight;
  document.getElementsByTagName("table").style.height = tableWidth;

table {
    width: 100%;
    display:block;
}

tbody {
    display: inline-block;
    width: 100%;
    overflow-y: auto;
    padding: 10px;
    background-color: black;
    border: 2px solid white;
}

tbody tr{
  margin: 2px solid white;
}

.video-wrapper{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-wrapper iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="content-wrap">
              <div class="video-wrapper"><iframe width="100%" height="auto" src="https://www.youtube.com/embed/z9Ul9ccDOqE"allowfullscreen></iframe></div></div><tableid="tableEsport">
  <tbody>
  </tbody>
</table>

javascript css

asked by anonymous 05.05.2018 / 18:49

1 answer

Redirect Servlet to JSP passing data Div on top of image

score 0 · Accepted Answer

Your code has some errors:

Here you are wanting to select the class by the tag that does not exist and is using the class name, not to mention that you need to specify an index, because this form if selection results in an array:

var tableheight = document.getElementsByTagName("video-wrapper").offsetHeight;

The correct one would be to use getElementsByClassName :

var tableheight = document.getElementsByClassName("video-wrapper")[0].offsetHeight;

On the other line the problem is similar, just missing the index and add "px" , because CSS does not recognize height without value type ( px , em , vh , % etc.). The correct would be:

document.getElementsByTagName("table")[0].style.height = tableheight+"px";

However, there are much more lucid ways to select these elements, using querySelector :

var tableheight = document.querySelector(".video-wrapper").offsetHeight;
document.querySelector("#tableEsport").style.height = tableheight+"px";

So you select the elements by class and by id .

Note: When selecting a class with querySelector , it is important to make sure that there is only 1 element with that class. If there is more of 1, querySelector will only get the first one.

See:

var tableheight = document.querySelector(".video-wrapper").offsetHeight;
document.querySelector("#tableEsport").style.height = tableheight+"px";

table {
    width: 100%;
    display:block;
}

tbody {
    display: inline-block;
    width: 100%;
    overflow-y: auto;
    padding: 10px;
    background-color: black;
    border: 2px solid white;
}

tbody tr{
  margin: 2px solid white;
}

.video-wrapper{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-wrapper iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="content-wrap">
   <div class="video-wrapper"><iframe width="100%" height="auto" src="https://www.youtube.com/embed/z9Ul9ccDOqE"allowfullscreen></iframe></div></div><tableid="tableEsport" bgcolor="#D51C1F">
  <tbody>
  </tbody>
</table>