Make <embed> take up entire height - html

Question

I'm using an <embed> element so I can render a PDF inline. It works well in all browsers, but I can't figure out how to have the <embed> take up the entire, available height in my Bootstrap column. Here is a Plunker. You'll need to widen the preview pane to see the columns next to each other.
This is my markup:
<div class="container">
<div class="row">
<div class="col-sm-7">
<div id="pdf-container">
<div id="pdf">
<embed width="100%" type="application/pdf" src="http://pdf.pdf">
</div>
</div>
</div>
<div class="col-sm-5">
Other stuff here
</div>
</div>
</div>
And here is the CSS that isn't completely working:
#pdf-container {
bottom: 20px;
left: 20px;
position: absolute;
right: 20px;
top: 0;
}
#pdf-container #pdf {
height: 100%;
width: 100%;
}
What I'm challenged with is that it seems like you need to set the height directly on the '` element so they even render. Setting the width on them to 100% is effective, but I can't get the height to take up 100% of the available height.
UPDATE: There appear to be a series of Bootstrap classes (.embed-responsive) that may be aimed at handling this, but when I apply it, my <embed> doesn't appear at all. Here is a Plunker for that.

Answer 1

I put mine in responsive iframes. Change the padding-bottom and padding-top: 30px; to suit your needs
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<object width="100%" data="https://modelica.org/events/modelica2012/authors-guide/example-abstract.pdf?scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed width="100%" type="application/pdf" src="https://modelica.org/events/modelica2012/authors-guide/example-abstract.pdf?scrollbar=0&toolbar=0&navpanes=0">
</object>
</div>
</div>