CODEWITHSUNDEEP
htmlcss
fangio
fangio

Reputation: 1786

CSS background color not full height of li

I have a navigation bar on top of my page created by ul and li elements. Now however when I make my screen smaller, suddenly I have a height problem. I show you in the picture.enter image description here

As you see because one of the items height is bigger, it is not filling up the full space.

How can I fix this, I tried everything, height 100% and so on, but it won't fix. I give you the CSS, because the html is just ul and li elements.

ul {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
    overflow: hidden;
    background-color: #6b3a8d;
}

li {
    float: left;
    width: 20%;
    height:100%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    cursor: pointer;
    height: 100%;
}




li:hover {
    background-color: rgba(42,23,55,0.2)
}


.activated {

    background-color: #1ABFB4;
}

.activated:hover{
    background-color: rgba(26,191,180,0.9);
}

.nocopy{
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

Upvotes: 0

Views: 1518

Answers (1)

vsync
vsync

Reputation: 130294

when you are using float the element does not respect it's siblings' height and does not auto adjust. you should use inline-block or flexbox.

Using flexbox (most flexible solution)

ul {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
    overflow: hidden;
    background-color: #6b3a8d;
    
    /*------------ ADDED THE BELOW: -----------*/
    display: flex;
    align-items: stretch;
}

li {
    width: 20%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    cursor: pointer;
    height: 100%;
}

li:hover {
    background-color: rgba(42,23,55,0.2)
}

.active{
    background-color: #1ABFB4;
}

.active:hover{
    background-color: rgba(26,191,180,0.9);
}
<ul>
  <li class='active'>aa</li>
  <li>bb</li>
  <li>ccc dddd rrrr<br> ffff aaa</li>
</ul>

You could also give the <ul> a specific height. your problem is that the li has height in percentage but it doesn't know percentage of what, because the ul doesn't specify any.

Upvotes: 3

Related Questions