Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

span 100% height of parent button

Tags:

css

height

button

I have the following markup

<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button>

and CSS

.filter {
    font-size: 3vw;
    text-align: left;
    line-height: 1.6;
    padding: 0px;
    display: block;
    height:auto;
    overflow: hidden;
    margin-bottom: 3px;
}
.filter span {
    background: $leithyellow;
    height: 100%;
    overflow:auto;
    display: block;
    width: calc(100% - 60px);
    float: left;
    margin-left:10px;
    padding-left:20px;
}

I cannot get the span to expand to 100% height of the button. Can this be done?

like image 589
LeBlaireau Avatar asked Dec 06 '16 12:12

LeBlaireau


People also ask

How do you set height to 100% of a parent?

Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

How can I make Div occupy full height of parent?

Example 2: The second way to achieve this by using align-items property in the parent div to 'stretch'. It makes every . child-div 100% height of it's parent height.

How do you set the height of a span?

To do so, use the “span” to access it. After that, set the value of the display property as “block” and its width and height as “400px” and “150px”. Moreover, set the background color of the span as “rgb(11, 235, 243)” and the border of the span as “5px” width, “solid” shape, and “rgb(47, 0, 255)” color.


1 Answers

Heights apply only if the heights are defined properly for the ancestors. If you want the height to work, that's a tricky one. You can use one of my favourites, but you need to make sure it works in all the cases:

  1. Give position: relative; to the parent.
  2. Give position: absolute; to the element that needs full height and width.
  3. Give the element, 0 values for all the sides.

Snippet

.parent {
  position: relative;
  width: 100px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: skyblue;
}
<div class="parent">
  <span class="child"></span>
</div>

In the above snippet, it is noted that this can also work, if you give:

.parent {
  position: relative;
  width: 100px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  width: 100%;
  height: 100%;
  background: skyblue;
}
<div class="parent">
  <span class="child"></span>
</div>

One good part about this approach is, you don't need to use the dangerous calc:

.parent {
  position: relative;
  width: 150px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 60px;
  background: skyblue;
}
<div class="parent">
  <span class="child"></span>
</div>

Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?

like image 129
Praveen Kumar Purushothaman Avatar answered Oct 04 '22 19:10

Praveen Kumar Purushothaman