Full Screen Height Grid Layout

HTML & CSS
1

I’m creating a page that will not only have the main menu toolbar but also four grid squares with videos in them. This page needs to take on the full height of the screen.

I would appreciate any links to tutorials that would help me accomplish this. My code (sorry, the page URL is protected and not publicly accessible):

<div id="page-container">
<header>main menu stuff here</header>
  <div id="grid-area">
    <div id="main-content">
    <article>
       <div class="entry">
          <div id="block">
            <div id="buildblock">
              <section>
                <row>
                   <div class="column">
                     <div class="mod">
                       <div class="viddbox">
                          <video>
                            <source type="video/mp4" src="">
                          </video>
                       </div>
                     </div>
                   </div>
                   <div class="column">
                     <div class="mod">
                       <div class="viddbox">
                          <video>
                            <source type="video/mp4" src="">
                          </video>
                       </div>
                     </div>
                   </div>
                </row>
                <row>
                   <div class="column">
                     <div class="mod">
                       <div class="viddbox">
                          <video>
                            <source type="video/mp4" src="">
                          </video>
                       </div>
                     </div>
                   </div>
                   <div class="column">
                     <div class="mod">
                       <div class="viddbox">
                          <video>
                            <source type="video/mp4" src="">
                          </video>
                       </div>
                     </div>
                   </div>
                </row>
              </section>
            </div>
          </div>
          </div>
      </div>
    </div>
</div>

Thank you.

2

Hi there toad78,

why would a menu and four squares need so may div elements. :eek:

Are you expecting the menu and four videos to fill the whole page?

Perhaps you could supply a diagram that fully displays your desires. :winky:

This would allow us to tell you what is possible and what is not. :biggrin:

coothead

3

The code build I’m dealing with looks like that. I didn’t build it, I’m just asked to create the page full height with the inclusion of the menu toolbar up top.

4

Hi there toad78,

here is an example that uses just five div elements.( :biggrin: )…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html, body {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
 }
*, *::before, *::after {
    box-sizing: inherit;
 }
body {
    padding-top: 0.5em;
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
#menu {
    display: flex;
    flex-wrap: wrap;
    height: 3em;
    padding: 0 ;
    margin: 0 0.5em;
    border: 1px solid #999;
    border-radius: 0.75em;
    list-style: none;
    background-color: #ccc;
 }
#menu li {
    width: 25%;
    padding: 0.5em;
 }
#menu a {
    display: block;
    color: #444;
    text-align: center;
 }
#content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.5em;
    height: calc( 100% - 3em );
 }
#content > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 49.75%;
    height: 49.75%;
    border: 1px solid #999;
    border-radius: 0.75em;
    background-color: #fff;
    overflow: hidden;
 }
#content > div > video {
   display: block;
   width: 100%;
   height: 100%;
 }
@media ( max-width: 22em ) {
#menu {
    height: 6em;
 }
#menu li {
    width: 50%;
  }
#content {
    height: calc( 100% - 6em );
  }
#content > div {
    width: 99.75%;
    height: 49.75%;
    margin-bottom: 0.5em;
  }
 }
</style>

</head>
<body> 

 <ul id="menu">
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
 </ul>

 <div id="content">

  <div>
   <video controls>
    <source src="https://www.coothead.co.uk/videos/QuentinSommerville.mp4" type="video/mp4">
   </video>
  </div>

  <div>
   <video controls>
    <source src="https://www.coothead.co.uk/videos/QuentinSommerville.mp4" type="video/mp4">
   </video>
  </div>

  <div>
   <video controls>
    <source src="https://www.coothead.co.uk/videos/QuentinSommerville.mp4" type="video/mp4">
   </video>
  </div>

  <div>
   <video controls>
    <source src="https://www.coothead.co.uk/videos/QuentinSommerville.mp4" type="video/mp4">
   </video>
  </div>

<!-- #content --></div>

</body>
</html>

coothead

1 Like
5

Thank you, @coothead, for taking the time to develop this. I’m going to take a look at this and make some adaptations and see how it goes.

6

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.