1

I have following index.html page:

<html>
<head>
<style>    
    html, body {
        height:100%;
    }
</style>
</head>

<body style="height:100%;">
<div style="width:100%; height:100%;">
  <div id="theHead" style="height:10%; ">

  </div>
  <div id="theMain" style="height:80%;">

  </div>
  <div id="theBottom" style="height:10%;">
  </div>
</div>
</body>
</html>

This is inside iframe:

<iframe id="theIframe" src="index.html" width="800px" height="450px">
   Hello World...
</iframe>

I see that a scroll bar appears on iframe, that allows for slight(very little) scrolling.

Why is any scrolling happening?

3 Answers 3

Reset to default
2

I see.. Because you must change browser css defaults use in reset.css or normalize.css

Example delete margin:

index.html page:

<html>
<head>
<style>    
    html, body {
        height:100%;
        margin:0px; //--> added this line
    }
</style>
</head>

<body style="height:100%;">
<div style="width:100%; height:100%;">
  <div id="theHead" style="height:10%; ">

  </div>
  <div id="theMain" style="height:80%;">

  </div>
  <div id="theBottom" style="height:10%;">
  </div>
</div>
</body>
</html>

Firefox default stylesheet file

Webkit default stylesheet file

0

instead of using 

<iframe id="theIframe" src="index.html" width="800px" height="450px">
   Hello World...
</iframe>

try using

<iframe id="theIframe" src="index.html" width="800px" height="450px">Hello   World...</iframe>

and add scrolling="no" if you don't want to see the scrollbar on your iframe.

0

Insert

display: block;

for iframe. Because iframe is inline element. Example:

body,
html {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

iframe {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: block;
  border: none;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.