CODEWITHSUNDEEP
cssiframecss-position
user1314836
user1314836

Reputation: 239

How to insert a top bar to a full page iframe

I want to make a page which shows:

I am translating this to something like this:

<div id="topbar">bla bla bla</div>
<iframe src="http://www.ign.es/iberpix2/visor/" style="width:100%; height:100%;"</iframe>

However the problem is that the height is 100% of navigator height, and with the "topbar" the real size exceeds 100%.

Is it possible to make what I am looking for? This is, to match the iframe height to 100% of the REMAINING page height.

Upvotes: 1

Views: 3031

Answers (2)

zer00ne
zer00ne

Reputation: 43880

In the Snippet the .topBar and .frame are wrapped in .box. .topBar has a red border and .frame has a blue border which demonstrates they both co-exist within 100% of height. Among all of the styles, the one most relevant is:

height: calc(100% - 40px);

The 40px is the height I arbitrarily gave to .topBar.

Also these properties and unit measures as well:

SNIPPET

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  width: 100%;
  font: 400px 16px/1.428 Consolas;
}
body {
  overflow-x: hidden;
  overflow-y: scroll;
}
.box {
  height: 100vh;
  width: 100vw;
  position: relative;
}
.topBar {
  height: 40px;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 3px solid red;
  font-size: 1.25rem;
  text-align: center;
}
.frame {
  height: calc(100% - 40px);
  width: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  border-top: 3px solid blue;
  overflow-x: hidden;
  overflow-y: scroll;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>topBar</title>
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <div class="box">

    <header class='topBar'>topBar</header>

    <iframe src="https://css-tricks.com/cross-domain-iframe-resizing/" class='frame' frameborder="0" scrolling="yes" width='100%' height='100%'></iframe>

  </div>

Upvotes: 3

user1314836
user1314836

Reputation: 239

Well, I managed to solve my problem.

The key was adding margin: 0px; padding: 0px; to <body> and using calc(100% - 30px) for the second <div>.

<body style="height:100%; margin: 0px; padding: 0px;">
    <div style="height:30px; background-color: #B0CCB0">Hola.</div>
    <div style="height: calc(100% - 30px); background-color:red">
        <iframe src="http://www.ign.es/iberpix2/visor/" style="display:block; width:100%; height:100%; border:none;">Tu navegador no soporta iframes, accede directamente a la herramienta <a href="http://www.ign.es/iberpix2/visor/">IBERPIX</a>.</iframe>
    </div>
</body>

Great!

Upvotes: 0

Related Questions