CODEWITHSUNDEEP
csshtml
Jasper
Jasper

Reputation: 8705

Scroll Bar in iframe - content has 100% height

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?

Upvotes: 1

Views: 666

Answers (3)

Alexey Baranoshnikov
Alexey Baranoshnikov

Reputation: 105

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;
}

Upvotes: 0

Haydar C.
Haydar C.

Reputation: 805

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

Upvotes: 2

JC09
JC09

Reputation: 21

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.

Upvotes: 0

Related Questions