Question 179689 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

How can I fill the space b/w header & footer with main content in Ubuntu?

I’m working through The Odin Project and I’m having trouble making my main content take up the rest of the space of the browser.

Right now it looks like this:

enter image description here

The 1px solid red border is as far as the main content goes. I have tried this but it’s not allowing for a fixed header and footer. I have also tried some other flex solutions. Those are commented out in the code.

Am I just doing this whole thing wrong? Is there a standard way that I don’t know about?

index.html:

<body>
    <div class="header">
        <h1>
            MY AWESOME WEBSITE
        </h1>
    </div>

    <div class="main-content">
        <div class="sidebar">
            <ul>
                <li><a href="#">⭐ - link one</a></li>
                <li><a href="#">🦸🏽‍♂️ - link two</a></li>
                <li><a href="#">🖌️ - link three</a></li>
                <li><a href="#">👌🏽 - link four</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem
                dignissimos
                maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit
                corrupti veritatis minima porro?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam
                maiores
                velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi
                odit
                ea.
            </div>
            <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
                eligendi
                aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
                esse
                autem?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
                amet
                adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
                minima
                laboriosam eos!</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
                eligendi
                aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
                esse
                autem?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
                amet
                adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
                minima
                laboriosam eos!</div>
        </div>
    </div>

    <div class="footer">
        The Odin Project ❤️
    </div>
</body>

</html>

style-07.css:

:root{
    --header-height: 72px;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    min-height: 100vh;
    height: 100%;
}

.main-content{
    display: flex;
    height: 100%; /* If I use px units it will force the main content to go down but I know that is not ideal. */
    padding-top: var(--header-height); 
    flex-direction: row;
    border: 1px solid red;
    /* Things I have tried from other answers*/
    /* flex: 1 1 auto; */
    /* height: calc(100% - var(--header-height)); */
}

.sidebar{
    flex-shrink: 0;
}

.content {
    padding: 32px;
    display: flex;
    flex-wrap: wrap;
}

.card {
    width: 300px;
    padding: 16px;
    margin: 16px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: var(--header-height);
    background: darkmagenta;
    color: white;
    padding: 0px 15px;
}

h1 {
    font-weight: 1000;
}

.footer {
    height: var(--header-height);
    background: #eee;
    color: darkmagenta;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar {
    width: 300px;
    background: royalblue;
    box-sizing: border-box;
    padding: 16px;
}

.card {
    border: 1px solid #eee;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
    border-radius: 4px;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: white;
    font-size: 24px;
}

li{
    margin-bottom: 16px;
}
Tags:

3

Answers


  1. 0

    I pasted your code in this code sandbox
    Seems to be working fine.
    https://7z1lvc.csb.app/

    also works on firefox

    Login or Signup to reply.
  2. 0

    You can use flex diplay on body instead of using instead of fixed on header and footer and make the body display flex with column direction, then for main-content all you need is to set flex: 1 and remove padding top, flex: 1 will make sure that main-content take any remaining space in the parent. Set the body height to height: 100vh and overflow: hidden, for man-content, set overflow: auto.

    Additionally, To make sidebar sticky when scrolling, I added position: relative; to main-content and position: sticky; to the sidebar.

    To force header and footer heights and prevent them to be squeezed by the flex position, use min-height instead of height as I modified in the code.

    Try to view the run code in full page, if you have any further questions, comment below.

    :root {
  --header-height: 72px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  height: 100vh;
  overflow:hidden;
  
  display: flex; 
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  overflow-y: auto;
  /* If I use px units it will force the main content to go down but I know that is not ideal. */
  flex-direction: row;
  border: 1px solid red;
  /* Things I have tried from other answers*/
  /* flex: 1 1 auto; */
  /* height: calc(100% - var(--header-height)); */
  
  position: relative;
}



.content {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 300px;
  padding: 16px;
  margin: 16px;
}

.header {

 
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  background: darkmagenta;
  color: white;
  padding: 0px 15px;
}

h1 {
  font-weight: 1000;
}

.footer {
  min-height: var(--header-height);
  background: #eee;
  color: darkmagenta;
 
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar {
  width: 300px;
  background: royalblue;
  box-sizing: border-box;
  padding: 16px;
  
  position: sticky;
  top: 0;
  
  white-space: nowrap;
  min-height: 250px;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: white;
  font-size: 24px;
}

li {
  margin-bottom: 16px;
}
    <body>
  <div class="header">
    <h1>
      MY AWESOME WEBSITE
    </h1>
  </div>

  <div class="main-content">
    <div class="sidebar">
      <ul>
        <li><a href="#">⭐ - link one</a></li>
        <li><a href="#">🦸🏽‍♂️ - link two</a></li>
        <li><a href="#">🖌️ - link three</a></li>
        <li><a href="#">👌🏽 - link four</a></li>
      </ul>
    </div>
    <div class="content">
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
      </div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
      </div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
      </div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    </div>
  </div>

  <div class="footer">
    The Odin Project ❤️
  </div>
</body>

</html>
    Login or Signup to reply.
  3. 0

    Everything you have done is okay, just change the body height to 100vh and main-content height calculation height: calc(100% - var(--header-height) - 5%);

    :root{
        --header-height: 72px;
    }
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        margin: 0;
        height: 100vh;/* add this */
    }
    
    .main-content{
        display: flex;
        height: calc(100% - var(--header-height) - 5%); /* add this */
        padding-top: var(--header-height); 
        flex-direction: row;
        border: 1px solid red;
    }
    
    .sidebar{
        flex-shrink: 0;
    }
    
    .content {
        padding: 32px;
        display: flex;
        flex-wrap: wrap;
    }
    
    .card {
        width: 300px;
        padding: 16px;
        margin: 16px;
    }
    
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        height: var(--header-height);
        background: darkmagenta;
        color: white;
        padding: 0px 15px;
    }
    
    h1 {
        font-weight: 1000;
    }
    
    .footer {
        height: var(--header-height);
        background: #eee;
        color: darkmagenta;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .sidebar {
        width: 300px;
        background: royalblue;
        box-sizing: border-box;
        padding: 16px;
    }
    
    .card {
        border: 1px solid #eee;
        box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
        border-radius: 4px;
    }
    
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    a {
        text-decoration: none;
        color: white;
        font-size: 24px;
    }
    
    li{
        margin-bottom: 16px;
    }
    <div class="header">
            <h1>
                MY AWESOME WEBSITE
            </h1>
        </div>
    
        <div class="main-content">
            <div class="sidebar">
                <ul>
                    <li><a href="#">⭐ - link one</a></li>
                    <li><a href="#">🦸🏽‍♂️ - link two</a></li>
                    <li><a href="#">🖌️ - link three</a></li>
                    <li><a href="#">👌🏽 - link four</a></li>
                </ul>
            </div>
            <div class="content">
                <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem
                    dignissimos
                    maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit
                    corrupti veritatis minima porro?</div>
                <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam
                    maiores
                    velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi
                    odit
                    ea.
                </div>
                <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
                    eligendi
                    aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
                    esse
                    autem?</div>
                <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
                    amet
                    adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
                    minima
                    laboriosam eos!</div>
                <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
                    eligendi
                    aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
                    esse
                    autem?</div>
                <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
                    amet
                    adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
                    minima
                    laboriosam eos!</div>
            </div>
        </div>
    
        <div class="footer">
            The Odin Project ❤️
        </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search