CODEWITHSUNDEEP
htmlcssiframe
user1854438
user1854438

Reputation: 1842

Display entire contents of an iframe without scrolling

I want to display the entire contents of the iframe so that there is only the default browser scroll bar. I can not seem to get rid of the iframe verticle scroll bar. Any suggestions?

<!DOCTYPE html>
<head>
<style>
#content{

 min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#f2f0ea;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}
</style>
<head>
<html lang = "en">
<body>
    <div style="content">
        <iframe style="overflow:hidden; position: float; display:block;  min-height: 100vh;  background-color: #f2f0ea; border: none;" 
                src="https://docs.google.com/document/d/1L3-ogIreQhm-aHutOfKjDI17buwCJRrkzmwvQGMafGw/pub?embedded=true" 
                height=100% width=100%></iframe>
    </div>
</body>
</html>

Upvotes: 1

Views: 10632

Answers (2)

zer00ne
zer00ne

Reputation: 43990

The googleDocs link in the iframe's src has every image with this: overflow: hidden I made a demo with normal content. Although it's the iframe's content that has the scrollbar, it's hard to tell since the parent page has no scrollbars.

There were a ton of syntax errors here's a few:

  • <div style="content"> what you really meant was: <div id="content">
  • position: float; I'm not sure if you intended one or the other.

  • <head> <html lang = "en">

    Given the position and content of these two elements, The <head> is actually the closing tag </head> and the <html lang="en"> should be at the very top of the page.

Here's the demo with normal content: http://plnkr.co/edit/EFP750Fth4PTutwdK56Y?p=preview

Upvotes: 1

SarangaR
SarangaR

Reputation: 764

try this

<!DOCTYPE html>
<head>
<style>
#content{

 min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#f2f0ea;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}

</style>
<head>
<html lang = "en">
<body>
    <div style="content">
        <iframe style="overflow:hidden; position: absolute; display:block;  min-height: 100vh;  background-color: #f2f0ea; border: none;" 
                src="https://docs.google.com/document/d/1L3-ogIreQhm-aHutOfKjDI17buwCJRrkzmwvQGMafGw/pub?embedded=true" 
                height=600%; width=100%  scrolling="no" ></iframe>
    </div>
</body>
</html>

Upvotes: 2

Related Questions