Question 391612 in Html Question posted in
Some basic documentation can be found here.

Html – Fixed sidebar and fixed header with scrollable grid main content

I am having trouble fixing my layout, so basically i want to design a layout for my website project that has a sidebar and a header, I want the header and sidebar to be fixed but the content of my main with a grid content is the only scrollable im close to making it work, but when I put the place-content: center on my cards-container it overlaps to the header and the cards cannot be scrolled.

:root {
    --color-primary: #202225;
    --color-secondary: #5865f2;
    --color-scheme: light;
    --body-bg: #0e1217;
    --header-nav-bg: #0e1217;
    --card-bg: #1c1f26;
    --border-color: rgba(107, 107, 107, 0.508);
}


body {
    background-color: #fff;
    min-height: 100dvh;
    font-family: "Fira Code", monospace;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    grid-template-rows: 56px 1fr;

    grid-template-areas:
      "header header"
      "sidebar main";
}


/* Styling */
.header-nav {
    background-color: var(--header-nav-bg);
    border-block-end: 1px solid var(--border-color);
    grid-area: header;
}

.sidebar {
    background-color: var(--body-bg);
    color: var(--color-secondary);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(123, 123, 123, 0.495);
    grid-area: sidebar;
    padding-block: 1rem;
}

.main {
    grid-area: main;
}

.cards-container {
    background-color: var(--body-bg);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(290px, 300px));
    padding-inline: 1.5rem;
    padding-block: 3rem;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding-inline: 1rem;
    padding-block: 1rem;
    color: #fff;
}

.card:nth-child(1) {
    grid-area: c1;
}
.card:nth-child(2) {
    grid-area: c2;
}
.card:nth-child(3) {
    grid-area: c3;
}
.card:nth-child(4) {
    grid-area: c4;
}
.card:nth-child(5) {
    grid-area: c5;
}
.card:nth-child(6) {
    grid-area: c6;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Main with sidebar | Grid</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <header class="header-nav"></header>
    <section class="sidebar">
          
    </section>
    <main class="main">
      <div class="cards-container">
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
      </div>
    </main>
  </body>
</html>

Can someone teach me what the best approach is and how to fix this?

Tags:

2

Answers


  1. 0

    I would take a different approach to achieve this. I wouldn’t use display: grid and I would use position: absolute to fix the position of heading and sidebar.

    Have a look at the below snippet. You can adjust the height and width of header and sidebar as needed.

            :root {
            --color-primary: #202225;
            --color-secondary: #5865f2;
            --color-scheme: light;
            --body-bg: #0e1217;
            --header-nav-bg: #0e1217;
            --card-bg: #1c1f26;
            --border-color: rgba(107, 107, 107, 0.508);
        }

        html{
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }


        /* Styling */
        .header-nav {
            background-color: var(--header-nav-bg);
            border-block-end: 1px solid var(--border-color);
            position: absolute;
            top: 0;
            height: 60px;
            right: 0;
            left: 0;
        }

        .sidebar {
            background-color: var(--body-bg);
            color: var(--color-secondary);
            box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
            border-right: 1px solid rgba(123, 123, 123, 0.495);
            position: absolute;
            top: 61px;
            bottom: 0;
            width: 60px;
        }

        .main {
            margin: 61px 0 0 60px;
            height: calc(100% - 60px);
            overflow-y: auto;
        }

        .cards-container {
            background-color: var(--body-bg);
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(290px, 300px));
            padding-inline: 1.5rem;
            padding-block: 3rem;
            height: 100%;
        }

        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding-inline: 1rem;
            padding-block: 1rem;
            color: #fff;
        }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Main with sidebar | Grid</title>
    <link rel="stylesheet" href="styles.css" />
    <link
            href="https://unpkg.com/[email protected]/css/boxicons.min.css"
            rel="stylesheet"
    />
</head>
<body>
<header class="header-nav"></header>
<section class="sidebar">

</section>
<main class="main">
    <div class="cards-container">
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
        <article class="card">card content</article>
    </div>
</main>
</body>
</html>
    Login or Signup to reply.
  2. 0

    try using position: fixed to fix this

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search