Apply style to html and body on a specific React Route

Question

There is an iframe that needs to rendered 100% for both width and height. Using the approach shared in https://stackoverflow.com/a/325334/858820 sort of helps to solve the problem.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

The iframe is rendered 100% but it requires the user to scroll down since the website has a header. I'd expect that the iframe is be rendered 100% but considering the remaining space available (taking into account the header space). This is a sample showcasing the problem:

body, html, main {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

<header>
  <h1>My header</h1>
</header>
<main>
  <div class="row-container">
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
  </div>
</main>

How to render the iframe 100% without forcing the user to scroll down?

score 1 · Accepted Answer · answered Oct 16 '22 at 06:37

Try this its work fine

body, html { margin: 0; padding: 0;display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

   <html>


<body>
<header>

    <h1>Tests</h1>
</header>
<div class="row-container">
    <div class="first-row">
        <p>Some text</p>
        <p>And some more text</p>
    </div>
    <iframe src="https://example.com" class="second-row"></iframe>
</div>
</body>

</html>

Apply style to html and body on a specific React Route

1 Answers1