Navbar should have 50% height of screen

1

Hi I’ve been trying to make a navbar about 20 min which should have 50% height of screen

basic.css

.container > li {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #ffeead;
  box-sizing: border-box;
  background-color: #96ceb4;
  list-style-type: none;
}

html, body {
  background-color: #ffeead;
  margin: 10px;
  height:100%;
}

.container {
  padding: 0;
}
.search-input {
  background: #ff6e68;
  border: 0;
  width: 100%;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid #ffeead;
  color: #ffeead;
}
::placeholder{
  color: #ffeead;
}

.search-input:focus {
  outline: none;
}

.container > li {
  background-color: #96ceb4;
}


/*.container > div:nth-child(2) {
  background-color: #ff6f69;
}

.container > div:nth-child(3) {
  background-color: #88d8b0;
}

.container > div:nth-child(4) {
  background-color: #96ceb4;
}
*/


index.css
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height:50%;
}







Index.html

<html>
    <head>
        <link rel="stylesheet" href="basic.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <nav id="wrapper">
            <ul class="container">
                <li>Home</li>
                <li>Profile</li>
                <li class="search">
                    <input type="text" class="search-input" placeholder="Search">
                </li>
                <li>Logout</li>
            </ul>
        </nav>
    </body>
</html>

I will be thankful if you help me

2

The first thing that I see is that you are including index.css in the HTML but the file name you gave above is style.css.

3

Sorry I made a mistake, name of file is index.css I wrote badly accidentally so it’s not wrong due to typo

4

I see you have the ul.container set to a height of 50%. It looks like it is working to me. I think you’ll need to be a little more specific about what you need help with.

5

for example If the browser is on fulscreen it should have 50% of height , but it doesn’t work. (

6

Can’t you just use vh instead?

Anyway, if you give the parent nav height: 100% it should also work. It takes it from the body and passes it to its children.

7

Ok it works but i had to use brackets. Earlier I was using scrimba and when I tried to use brackets it works