How to make background height 100% of the parent's height-CodePudding

I'm trying to create a menu inside CSS, and this is how my HTML skeleton looks like:

<body>
    <div >
        <ul >
            <li >Item1</li>
            <li >Item2</li>
            <li >Item3</li>
        </ul>
    </div>
  </body>

This is the part of CSS I'm focusing on:

.menu-container {
    background-color: #e5e5e5;
    width: 100%;
    height: 4rem;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
}

.menu-list {
    margin: 0 auto;
}

.menu-item {
    display: inline-block;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

Basically, what I'm trying to achieve is setting the background color of each element to red, on element hover (<li>). The problem is, the background color seems not to fill the whole height of its parent (the menu-container), although this is what I actually want to do.

I tried setting the menu-item padding to 100%, but it just fills the whole screen. It isn't relative to menu-container's height.

To be more precise, this is how it looks like:

But I want the red background's height all over the div, like this:

What can I do, in order to achieve that? Thank you.

CodePudding user response：

So, Instead of giving a fixed height to parent div. I adjust this using by adding padding from the top and bottom to each lielement.

Made some changes on CSS Have a look the snippet below:

    .menu-container {
    background-color: #e5e5e5;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
}

.menu-list {
    margin: 0 auto;
}

.menu-item {
    display: inline-block;
    padding: 1.25rem 0;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

<body>
    <div >
        <ul >
            <li >Item1</li>
            <li >Item2</li>
            <li >Item3</li>
        </ul>
    </div>
  </body>

CodePudding user response：

Just add height:100% to both menu-list and menu-item. In case you want the item to be centered instead of sticking to the top you can use a display: flex and align-items: center, justify-content:center

CodePudding user response：

.menu-container {
    background-color: blue;
    width: 100%;
    height: 4rem;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content:center;
}

.menu-list {
    height: 100%;
    background-color:yellow;
    display:flex;
    align-items: center;
    justify-content:center;
}

.menu-item {
    display: flex;
    align-items:center;
    justify-content:center;
    height:100%;
    background-color:green;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

You can make your CSS like this, Giving the height to 100% will take 100% height of the parent element.

CodePudding user response：

I am trying to fix your css, please check my solution -

.menu-container {
    background-color: #e5e5e5;
    width: 100%;
    height: 4rem;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
}

/* at first you inline the whole ul */
.menu-list {
    margin: 0 auto;
    display: flex;
    list-style: none;
}
/* then center the options & set full height */
.menu-item {
    display: flex;
    align-items: center;
    height: 4rem;
    cursor: pointer;
    padding: 0 1rem;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

CodePudding user response：

Solution 2

.menu-container {
    background-color: #e5e5e5;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
}

/* set full height */
.menu-list {
    margin: 0 auto;
    height: 100%;
}
/* set full height also */
.menu-item {
    display: inline-block;
    padding: 1.25rem 0;
    height: 100%;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}