• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 121
  • Last Modified:

extra space below iframe

Hi..i have a problem with iframe where there is extra space under iframe. I try to remove it by adjusting the height but the content inside the iframe become shorter.
Here is my code:
<div style="border:1.5px solid #000;">            
 <div id="contentframe" style="position:relative; top: 0px; left: -380px;">
<iframe src="http://10.101.130.79/weathermap.html" frameborder="0" scrolling="no" width="1380" height="845" style="transform: scale(0.5);"></iframe>
</div>

i really hope somebody can help me to fix it. Thank you
0
Nur
Asked:
Nur
  • 5
  • 3
1 Solution
 
Julian HansenCommented:
That code is obviously just a snippet - can you show us the full listing (preferably a link) and a screen shot to show us what we should be looking for.
1
 
Julian HansenCommented:
What are you trying to achieve with this line
<div id="contentframe" style="position:relative; top: 0px; left: -380px;">

Open in new window

0
 
Terry WoodsIT GuruCommented:
Pasting this into jsfiddle just gives a blank box. Can you provide a live example?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
NurAuthor Commented:
<div id="contentframe" style="position:relative; top: 0px; left: -380px;"> :i used this to control the position of my iframe
Capture1.PNG
0
 
Julian HansenCommented:
<iframe src="http://10.101.130.79/weathermap.html" frameborder="0" scrolling="no" width="1380" height="845" style="transform: scale(0.5);"></iframe>

Open in new window

Specifically

style="transform: scale(0.5);"

In other words you are saying - make this half the size I asked for - why are you doing that?

Take that out for starters.
0
 
NurAuthor Commented:
thanks for your respond...at first,  i have to embed the whole website into the iframe and i set the width and height (width="1380" height="845") for that purpose but unluckily it produce the bigger size and i need to resize it  so that it fit the border size. That's why i used style="transform: scale(0.5);" and the website become smaller and left the white space. I want to know how to remove the extra space.

here is my jsfiddle:
https://jsfiddle.net/wcu2hzjx/2/
0
 
Julian HansenCommented:
Yes but you are contradicting yourself in the code - first you are saying I want the width to be 1380 then you are saying make the width half that - does not make sense.

If you want your iframe to fit width wise make the width 100%

If you are going to style your iframe you must do it as an element not a class - in your css you had

.iframe
Instead of
iframe

Your <div> tags where unmatched.
You had styling in your iframe to move left.

Here is a start https://jsfiddle.net/nxxv9410/
1
 
NurAuthor Commented:
Thank you for your help sir...it help me alot
0
 
Julian HansenCommented:
Do you still require assistance on this?
If not you can close the question by selecting the answer that best fits your requirements and close the question.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now