New navigation and a css problem

hristo · Oct 2, 2006

Hi guys,

im working on a new navigation for my website. The idea is to place a "status bar" on the bottom of the screen and use it for navagation and login/search functions in the site.

Im trying to make 2 separate DIVs, 1st(top) will be a scrollable container for the website content using all the available space except 40px which will be used for the 2nd (bottom) div - "status bar".
I cant make the proper CSS(dunno if it is possible at all). All the tries ended with half hidden scroll bar or other problems

There is an easy way to do it with frames but its not an option for me.

Any help will be appreciated,
Thanks
Hristo Salabashev
taumedia.com

MysticAce07 · Nov 5, 2024

aight, so:
your trying to set up a clean nav with a fixed status bar at the bottom. u can perfomr this layout using: flexbox/css grid to control the space correctly w/o hidden scroll bars. e.g

CSS:

html, body {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content {
    flex: 1;
    overflow-y: auto;
}

.status-bar {
    height: 40px;
    background-color: [input ur colour];
}

I hope this can help you.

VBService · Nov 15, 2024

Have you tried using position: fixed; for the status bar?

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
      html,
      body {
        --status-bar-height: 40px;
        height: 100dvh;
        margin: 0;
        padding: 0;
      }
      main {
        padding: 1rem;
        padding-bottom: calc(var(--status-bar-height) * 1.125);
      }
      .status-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--status-bar-height);
        padding: .5rem 1rem;
        background-color: hotpink;
        opacity: .9;
        box-sizing: border-box;
      }

      /* for demonstration purposes */
      p {
        text-indent: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="status-bar">Lorem</div>
    <main></main>


    <!-- for demonstration purposes -->
    <script>
      window.onload = () => {
        const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. ';
        document.querySelector('main').innerHTML = `<p>${lorem.repeat(100)}</p>`.repeat(3);
      }
    </script>
  </body>
</html>

VBService · Nov 15, 2024

MysticAce07 said:
u can perfomr this layout using: flexbox/css

In addition to flex, you can also use grid.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        display: grid;
        grid-template-rows: 1fr 40px;
        height: 100dvh;
      }
      main {
        padding: 1rem;
        overflow-y: auto;
      }
      .status-bar {
        padding: .5rem 1rem;
        background-color: hotpink;
        box-sizing: border-box;
      }

      /* for demonstration purposes */
      p {
        text-indent: 1rem;
      }
    </style>
  </head>
  <body>  
    <main></main>
    <nav class="status-bar">Lorem</nav>

    <!-- for demonstration purposes -->
    <script>
      window.onload = () => {
        const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. ';
        document.querySelector('main').innerHTML = `<p>${lorem.repeat(100)}</p>`.repeat(3);
      }
    </script>
  </body>
</html>

New CSS features for smooth entry and exit animations	0	May 28, 2024
CSS Grid. Im having trouble containing a title an image and a button	1	Oct 25, 2022
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 24, 2022
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I need help fixing my website	2	Oct 15, 2023
Im having trouble containing a title an image and a button	2	Oct 25, 2022

New navigation and a css problem

hristo

MysticAce07

VBService

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads