How to overcome the space between content and footer when the entire content is shorter than the screen size

Question

After applying the below style, a gap between entire content and footer occurs. And then I applied min-height in the HTML object tag and parent div as mentioned by the last member in the below link, still it not reflects in the page. What I'm missing?

Percentage Height HTML 5/CSS

div#container{
    min-height: calc(100vh - 456px);
}

object {
    background-color: #398DCB !important;
    display: inline-block;
    width: 100vw;
    height: 100vh;
    min-height: calc(100vh - 456px);
}

HTML

  
<html xmlns="http://www.w3.org/1999/xhtml">
   <head> 
      <meta charset="utf-8">
   </head>
   <body>
      <div id="container">  
          <object id="obj" data="details.html"  width="100%" type="text/html"></object> 
      </div>
   </body>
</html>

Updated:

details.html

<div>
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..! 
</div>

It appeared fine when we add content directly inside the object tag, the issue arises when we do the same by using data attribute to load the content.

Depends on your design but from the little you pasted you could do a easy one and have the body background-color to be blue. — Dejan.S, Oct 22 '20 at 12:27
@Dejan.S Agree, but some page may have different background color. And some page has only dropdown and button in the initial page load. So if I make it standard height based on (content - (header + footer) px) in min-height it will serve my purpose. — Dev, Oct 22 '20 at 12:32
@Dejan.S Please take a look at it. https://jsfiddle.net/qhrcb7n5/ — Dev, Oct 22 '20 at 13:51
@Dejan.S It works fine with your updated example but the issue occurs when I try to load the same data from another file. I have edited the question give more clarification. — Dev, Oct 23 '20 at 07:08
@Dejan.S Copy & Paste the sample data multiple times in the details.html to recreate the issue. Please help me to fix this. — Dev, Oct 23 '20 at 07:19

Dejan.S · Answer 1 · 2020-10-22T17:38:37.543

You can do like this that you use flex on the body, or a container and use flex on that. Flex-grow on the container will always take the available space left.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.header {
  height: 5rem;
  background-color: aqua;
}

object {
  flex-grow: 1;
}

.footer {
  height: 10rem;
  background-color: red;
}

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8">
</head>

<body>
  <header class="header">header</header>
  <object id="obj" width="100%" type="text/html">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..!
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

      Ut enim ad minima veniam quis nostrum exercitationem ullam corporis..! abc


    </object>
  <footer class="footer">footer</footer>
</body>

</html>

Your example works fine for your layout but I'm facing issue with object tag here. Please take a look at it. https://jsfiddle.net/qhrcb7n5/ — Dev, Oct 22 '20 at 13:49
@Dev I updated my example with your fiddle code. You have to have that on the body. — Dejan.S, Oct 22 '20 at 17:39

How to overcome the space between content and footer when the entire content is shorter than the screen size

1 Answers1