I am trying to build a div that should cover all the visible page. Inside this div there should be another one placed in the center (horizontally and vertically). this is what I have done so far:

.spinner-box {
    background-color: #0F83E8;
    background-size: cover;
}

.spinner {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0000cc;
    text-align: center;
}

<div class="spinner-box">
  <div class="spinner">
    my content
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The inner div is visible but I can't the backgroud color of the outer one. I know this question has been asked many times but i can't find an example with a div covering all the page

CodePudding user response：

body {
    margin: 0;
    padding: 0; 
}
.spinner-box {
    background-color: #0F83E8;
    background-size: cover;
    position: absolute;
    height: 100%;
    width:100%;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0000cc;
}

<div class="spinner-box">
      <div class="spinner">
        my content
      </div>
    </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You need to add some styles to .spinner-box:

.spinner-box {
    background-color: #0F83E8;
    background-size: cover;
    position: absolute;
    height: 100%;
    width:100%;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0000cc;
}

<div class="spinner-box">
      <div class="spinner">
        my content
      </div>
    </div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

There's a few factors here.

• The parent element hasn't been given the maximum dimensions to cover the viewport.
• The className is not a correct HTML attribute in this situation, is
  should be class.
• Browsers have default settings which may mean that the body for
  example has a margin so the whole viewport won't be covered.
• I don't know why the top of the element was set to 40% if it is to be centered that should be 50%. Of course if there is a reason for the
  40% reinstate it.

This snippet alters these

* {
  margin: 0;
  padding: 0;
}
.spinner-box {
  background-color: #0F83E8;
  rbackground-size: cover;
  position: relative;
  width: 100vw;
  height: 100vh;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0000cc;
  text-align: center;
}

<div class="spinner-box">
  <div class="spinner">
    my content
  </div>
</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>