Below is a snippet of code that I am working with:
<style type="text/css">
.div_class
{
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-375px;
margin-top:100px;
height:300px;
width:500px;
overflow:hidden;
}
.iframe_class
{
position:relative;
border:1px solid red;
height:100%;
margin-left:-218px;
margin-top:-110px;
}
</style>
<div class="div_class">
<iframe src="http://www.w3schools.com/" class="iframe_class" />
</div>
The problem arises when trying to display only a section of the iframe within the enclosing div. The right and bottom borders of the iframe do not line up properly after repositioning it, as the height is set to 100% relative to the div.
Desired Outcome: I am seeking a solution where even after repositioning the iframe, the right and bottom borders align perfectly with those of the div. How can this be achieved?
Important Notes:
- http://www.w3schools.com/ is used as an example source. In reality, the iframe content will be determined by a PHP script.
- It's not feasible to set the iframe height to 218+document_height_of_iframe_src since the source is dynamically selected. Therefore, the height of document_height_of_iframe_src remains unknown. The same goes for document_width_of_iframe_src.
- All adjustments need to be made without relying on JavaScript.
Thank you in advance...