admin管理员组

文章数量:1129455

I have a page divided into two sections. The page is responsive in the way I want it to be. The problem is, as you can see, that the iframe is not displaying its full content - by cutting the height.

Any suggestions how to make it displayed in the center as it is at the moment but with full height shown?

.c-login__wrapper {
  justify-content: center;
  height: 100vh;
  display: flex;
  background-color: pink;
  padding: 5px;
}

.login-positioner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  padding: 5px;
  width: 50%;
  height: 100%;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: red;
  padding: 5px;
}

.marketing-positioner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  padding: 5px;
  width: 50%;
  height: 100%;
}

.marketing {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: blue;
}
<html>

<body>
  <div class="c-login__wrapper">
    <div class="login-positioner">
      <div class="login">
        <form>
          <form action="/action_page.php">
            <label for="fname">First name:</label><br />
            <input type="text" id="fname" name="fname" value="John" /><br />
            <label for="lname">Last name:</label><br />
            <input
                type="text"
                id="lname"
                name="lname"
                value="Doe"
              /><br /><br />
            <input type="submit" value="Submit" />
          </form>
        </form>
      </div>
    </div>

    <div class="marketing-positioner">
      <div class="marketing">
        <!-- <iframe src="" width="100%" height="100%" allowfullscreen frameborder="0"></iframe> -->
        <iframe
            src=""
            width="100%"
            height="100%"
            frameborder="0"
            allowfullscreen
          ></iframe>
      </div>
    </div>
  </div>
</body>

</html>

I have a page divided into two sections. The page is responsive in the way I want it to be. The problem is, as you can see, that the iframe is not displaying its full content - by cutting the height.

Any suggestions how to make it displayed in the center as it is at the moment but with full height shown?

.c-login__wrapper {
  justify-content: center;
  height: 100vh;
  display: flex;
  background-color: pink;
  padding: 5px;
}

.login-positioner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  padding: 5px;
  width: 50%;
  height: 100%;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: red;
  padding: 5px;
}

.marketing-positioner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  padding: 5px;
  width: 50%;
  height: 100%;
}

.marketing {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: blue;
}
<html>

<body>
  <div class="c-login__wrapper">
    <div class="login-positioner">
      <div class="login">
        <form>
          <form action="/action_page.php">
            <label for="fname">First name:</label><br />
            <input type="text" id="fname" name="fname" value="John" /><br />
            <label for="lname">Last name:</label><br />
            <input
                type="text"
                id="lname"
                name="lname"
                value="Doe"
              /><br /><br />
            <input type="submit" value="Submit" />
          </form>
        </form>
      </div>
    </div>

    <div class="marketing-positioner">
      <div class="marketing">
        <!-- <iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="100%" height="100%" allowfullscreen frameborder="0"></iframe> -->
        <iframe
            src="https://yachting.volygroup.com/voly-projects-login-advert"
            width="100%"
            height="100%"
            frameborder="0"
            allowfullscreen
          ></iframe>
      </div>
    </div>
  </div>
</body>

</html>

  • css
  • iframe
  • flexbox
Share Improve this question edited Jan 8 at 16:53 isherwood 61k16 gold badges120 silver badges168 bronze badges asked Jan 8 at 13:35 dariuszdariusz 5731 gold badge6 silver badges18 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

The height of .marketing needs to be set to 100%

With the current code the iframe is indeed going 100% height and width, but to the size of the .marketing div. If we increase its height to 100% it resolves this issue

本文标签： cssHow to center iframe and make its full height visible and responsiveStack Overflow

版权声明：本文标题：css - How to center iframe and make its full height visible and responsive - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736722998a1949576.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。