How to Leave Element LI 100% [duplicate]

Question

How to Leave Element LI 100% [duplicate]

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

The photo above represents a slider I'm doing on a page.

Each slider has an image in the middle representing the white sphere.

I want all sliders that are made up of li to be the same size, the same size as the larger one, that is, the orange slider.

Regardless of the color, it was just an example, I want them to be the same size.

The black line represents the end of li orange. I want everyone else to go to the end.

I tried ...

ul{
    height: 100%;
}

li{
    height: 100%;
}

... but it did not work out.

The li(s) has no fixed size. They just take the height of the object that is in the middle, sometimes the object is bigger than the other and ends up giving that difference.

html css

asked by anonymous 21.09.2015 / 22:17

2 answers

0

I succeeded.

I put in the ul property:

display: table .

Why li was already display: inline-block .

21.09.2015 / 22:38

Problem creating search function in C Comparison of elements of a vector

score 2 · Accepted Answer

height: 100% needs a reference to be calculated. Consider the example:

 .x {
   height: 100%;
   background: red
 }

<body>
  <div class='x'>StackOverflow</div>
</body>

Does it work? Yes, it works.

Maybe it does not work "visually" speaking, after all it was expected that .x would occupy 100% of the height of body . But if you consider the above snippet, what size does the body have? A simple question: How will one element occupy 100% height of another element that has no height?

Taking the same snippet as above and assigning a value to the% body of the body , here's the result:

body {
  height: 300px /* exemplo */
}
.x {
  height: 100%;
  background: red
}

<body>
  <div class='x'>StackOverflow</div>
</body>

Maybe there's a problem with the code you posted, it was not clear where this height and ul are being placed and if the parent elements are size. But it is enough that you establish a reference for them to calculate 100% of height.

.referencia {
  height: 200px /* a referência tem 200px de altura */
}

ul {
  height: 100%;
  list-style: none
}

li {
  display: inline-block;
  width: 100px;
  height: 100%
}

li:nth-child(1){ background: #A50D18 }
li:nth-child(2){ background: #636363 }
li:nth-child(3){ background: #003662 }
li:nth-child(4){ background: #F26522 }

<div class='referencia'>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>