CODEWITHSUNDEEP
htmlcssiframe
Brandon Molyneaux
Brandon Molyneaux

Reputation: 1763

Double scroll bar due to iframe

With the code below, I'm getting a double scroll bar - one for the iframe itself and one for the web page. I am looking for suggestions/solutions to only have one scroll bar, which would be associated with the entire page, not the iframe. My original thought process was to determine the size of the browser using javascript, then use that as the iframe tag height.

HTML:

<body>
  <header>
    <div class="container">
       <a href = "index"><img id='logo' src='logo.png' style="width:230px;height:237;"/></a>
       <nav>
          <ul>
            <li><a href="link1">link1</a></li>
            <li><a href="link2">link2</a></li>
            <li><a href="link3">link3</a></li>
          </ul>    
        </nav>
    </div> 
  </header>
  <div class = "iframe-content">
  <iframe src ="https://NeedToScrollToSeeContent.com" width= 100% height= 1000 style="text-align:center" frameborder="0"></iframe>
   </div>
 </body>

CSS:

body{
    margin: 0;
    background: #222;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

header {
    background: #ffffff;
    position: relative;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.iframe-content {
    position: absolute; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 0;
}
.iframe-content iframe {
    display: block; 
    width: 100%; 
    height: 100%; 
    border: none;
}

Things I've tried:

  1. In the html iframe tag, I took out height = 1000. This shrunk the iframe to a very small portion of the page. I also replaced in the html iframe tag height = 1000 with height = 100% and still got the same issue.
  2. As mentioned above, I used javascript to determine the height of the browser and used that to determine the height attribute within the iframe tag. That did work, but it gave me a scroll bar only for the iframe, not the entire page.

Do note that I have taken a look at this similar question and implemented it into my code.

Upvotes: 1

Views: 3623

Answers (1)

cjl750
cjl750

Reputation: 4629

(Note that this solution assumes your iframe doesn't need to scroll, not that you want it to scroll but hide the scrollbar. That'd be more complicated.)

First thing to do to your <iframe> tag in your HTML is strip out the height and width attributes and just define those in the CSS. Then, to get rid of scrolling within the iframe, set scrolling="no". That'll hide the scrollbar.

<iframe src="webpage.com" frameborder="0" scrolling="no">

In your CSS, you can use viewport units for the height of the iframe since percentages are problematic. 1vw is equal to 1% of the height of the window. Viewport units let you set a relative height for responsiveness while still acting as a fixed unit, so the iframe won't collapse to be real short.

.iframe-content iframe {
  height: 70vh; /* or whatever */
}

Lastly, to make sure this all works, get rid of the absolute positioning on .iframe-content. It's not necessary.

html, body {
  height: 100%;
}
body {
  margin: 0;
  background: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}
header {
  background: #ffffff;
  position: relative;
  height: 100px;
}
.container {
  width: 80%;
  margin: 0 auto;
}
/* .iframe-content {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
} */
.iframe-content iframe {
  display: block;
  width: 100%;
  height: 70vh;
  border: none;
}
#other-stuff {
  height: 300px;
  background-color: firebrick;
}
<header>
  <div class="container">
    <a href="index"><img id='logo' src='logo.png' style="width:230px;height:237;" /></a>
    <nav>
      <ul>
        <li><a href="link1">link1</a></li>
        <li><a href="link2">link2</a></li>
        <li><a href="link3">link3</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="iframe-content">
  <iframe src="https://en.wikipedia.org/wiki/Main_Page" style="text-align:center" frameborder="0" scrolling="no"></iframe>
</div>
<div id="other-stuff"></div>

Upvotes: 3

Related Questions