css - How to center iframe and make its full height visible and responsive - Stack Overflow

admin2025-04-28 2

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>

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>

Share Improve this question edited Jan 8 at 16:53 isherwood 61.2k16 gold badges122 silver badges170 bronze badges asked Jan 8 at 13:35 dariusz 5931 gold badge6 silver badges18 bronze badges

Add a comment |

2 Answers 2

Sorted by: 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

For those who may have the same problem in the future, here is the solution with only CSS.

.c-login__wrapper {
  -webkit-box-pack: unset;
  -webkit-box-align: unset;
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: space-around;
}

.login-positioner {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  background-color: green;
}

.login {
  background-color: red;
  margin: 0;
  width: 200px;
}

.marketing-wrapper {
  align-items: center;
  background-color: aqua;
  height: 100%;
  display: flex;
  flex-basis: 100%;
  justify-content: center;
}

.marketing-positioner {
  // margin: 0 auto;
  height: 371px;
  width: 355px;
  background-color: yellow;
}

And the working example https://codesandbox.io/p/sandbox/nervous-waterfall-gmgcvf?file=%2Fstyles.css%3A1%2C1-38%2C1

转载请注明原文地址:http://anycun.com/QandA/1745853827a91255.html

css - How to center iframe and make its full height visible and responsive - Stack Overflow

2 Answers 2

cssHow to center iframe and make its full height visible and responsiveStack Overflow