0

This question has been repeated before and I have tried everything that I have found on the internet.

I have a div 'A' inside iframe and the iframe is inside the wrapper div. When I am trying to fix the div 'A' on the top of the screen in mobile view it works without iframe but with iframe it doesn't work.

Position: fixed doesn't work. I can't add the div to be fixed, outside the iframe dynamically using javascript as it will mess up my app's structure.

Can someone please help? I can't share the whole code. but this is the structure and I can't avoid iframe unfortunately.

Parent page:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .outside {
            position: fixed;
            background: blue;
            top: 0;
            height: 65px;
            width: 53px;
            z-index: 10;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="outside"></div>
        <iframe sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-top-navigation"
            allow="geolocation" name="v4wj632" src="./ifram1.html" scrolling="no"
            style="width: 100%; border: none; position: relative; height: 1148px; top: 0px; left: 0px; display: block;"></iframe>
    </div>
</body>

</html>

Iframe src page (ifram1.html):

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            border: 1px solid red;
            position: fixed;
            top: 0;
            width: 100%;
            text-align: center;
            z-index: 11;

        }
        div.para {
            clear: both;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <h1>
            Hello
        </h1>

        <div class="para">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>
</body>

</html>

The div outside iframe sticks to the top but h1 tag inside i frame

Sonal
  • 158
  • 1
  • 10
  • can you show us the code ? – Utkarsh Nov 27 '19 at 12:29
  • my suggestion is to stay away from iframe https://stackoverflow.com/questions/23178505/good-reasons-why-not-to-use-iframes-in-page-content –  Nov 27 '19 at 12:30

1 Answers1

0

Have you considered fixing the div outside of the Iframe. And if it has a height. Setting that height as a top margin on the iframe ?

E.g.

.divA {
 position: fixed;
 top: 0;
 height: 20vh;
 z-index: 2;
}

Can you give iframe a class? 

.iframe{
 margin-top: 20vh;
 z-index: 1;
}
Georg
  • 67
  • 6
  • Thanks for the suggestion. But I can't take the div outside of iframe it has to stay inside. I tried your answer but it didn't work. – Sonal Nov 27 '19 at 16:49
  • No problem have your tried position: sticky; top: 0; ? – Georg Nov 27 '19 at 16:57
  • Yeah. Just did. doesn't work. As my page's body scrolls. with that the divA scrolls too because its inside iframe :( – Sonal Nov 27 '19 at 17:02
  • Ok it’s going to be hard to make it stick to the top of the page while still inside the iframe. As it contradicts itself. But there is smarter people here then me that may be able to help. Good luck ! – Georg Nov 27 '19 at 17:09