All geek questions in one place

JS - iframe height with 100% and no scroll (Scroll-y in body)

I have an iframe problem. firstly, I am looking for the iframe height keyword in https://stackoverflow.com/search?tab=relevance&q=iframe%20height , but I did not find anyone that I needed.

How to create iframe height wicth with 100% and without scrolling. Scroll-y in the body.

 <body style="scroll-x:hidden;scroll-y:auto;"> <iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>

And if I say something through http://www.google.com in the iframe, go to the Google search results page. the iframe will calculate the new height and still with an iframe height of 100%, a scroll bar in the body part. (I want some help to work perfectly not only in ie and firefox, but also in safari and chrome). Many thanks.

+6
source share
3 answers

This should do what you are looking for:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title</title> <style type="text/css" media="screen"> body, html { width: 100%; height: 100%; overflow: hidden; } * { padding: 0; margin: 0; } iframe { width: 960px; height: 100%; overflow: hidden; border: none; } </style> </head> <body> <iframe src="http://google.com" scrolling="no"></iframe> </body> </html>

The keys are here:

  • Make the BODY and HTML elements 100% of the browser window, so when you make the iFrame 100%, it has something 100%.
  • Set the BODY and HTML elements to overflow: hidden so that no scrollbar is shown
  • Make sure there is no gasket

Hope that helps

+4
source

Use my jQuery plugin:

  $.fn.resizeiframe=function(){ $(this).load(function() { $(this).height( $(this).contents().find("body").height() ); }); $(this).click(function() { $(this).height( $(this).contents().find("body").height() ); }); }

then use it like:

 $('iframe').resizeiframe();

Remember to adjust the iframe attributes as follows:

 <iframe src="islem.html" frameborder="0" width="100%" marginheight="0" marginwidth="0" scrolling="no" ></iframe>
+3
source

I was looking for the same effect, and I found a way. If you look with the explore item in Chrome (or firebug) in the metrics section, select <html> . You should see if the html area is smaller than the entire document. If you install html at a height of: 300%, it should work. Here are the important features:

 html {height:300%; } body {height:100%; } #frame {height:90.74074074074074%;}

*** watch out for any maximum height that you could encode, it will blame the effect up.

In my case, I had to split the frame height with another element in my container so that it could stretch completely without the appearance of scroll bars. So I had to calculate the% of height remaining in my container using firebug.

------- Another way is easier:

Do not try to specify a height for your HTML documents,

 html, body {}

then only the code:

 #some-div {height:100%;} #iframe {height:300%;}

Note: div should be your main section.

This should relatively work. iframe accurately calculates 300% of the visible window height. If your html content from the second document (in the iframe) is less in height than 3 times your browser height, it works. If you don’t need to often add content to this document, this is a permanent solution, and you can simply find your own%, which is necessary for the height of your content.

+1
source

Source: https://habr.com/ru/post/887768/

More articles:


All Articles