Height style property issue.

Question

.circle {
    max-width: 150px;
    width: 100%;
    max-height: 150px;
    height: 100%;
    display: block;
    background: #ff4040;
    border-radius:50%; 
}

Hey guys I'm trying to create a circle with bg color. But based on my style that I attached above is not working properly. It didn't take height. Can you please tell me why? Thanks :)

height 100% is based on the outer item. Therefore if the outer item has no height the height will be 0. Can you maybe submit a plunker, jsfiddle or stackblitz example so that I can better help you? Also if you use chrome devtools you can inspect an item to ensure that the css is being applied properly. You can see if the css is being applied and/or if it's being overridden elsewhere. You can also edit the css to see what will work and what won't — jgerstle, Nov 02 '18 at 06:56

score 0 · Answer 1 · answered Nov 02 '18 at 07:00

You need to declare a height for a parent element to be able to use %-size on the children.

like for example:

.parent{
    height: 666px; //or any %-value if the grandmother height is defined trailing back to the html-element
}

Check this fiddle out:

https://jsfiddle.net/n1o8057L/1/

Viira · Answer 2 · 2018-11-02T07:28:55.990

It is always recommended to mention height to the parent/grandparent before you use height:100% to a child element

Try this

.circle {
    max-width: 150px;
    width: 100%;
    max-height: 150px;
    height: 100%;
    display: block;
    background: #ff4040;
    border-radius:50%; 
}

body{
    height:100vh;
    position:relative;
}

<div class="circle"></div>

If you still don't want to mention height to the body element(parent) you can define them like this

Because by default the div elements' were block elements

Block elements always have 100% width but not a definite height

so define the max-width the actual size and set its width to 100% so that it won't escape the given width.

But when it comes to height divs don't have heights by default so here set height or min-height to your required value and add max-height:100% (optional)

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

    .circle {
        max-width: 150px;
        width:100%;
        max-height: 100%;
        min-height:150px;
        display: block;
        background: #ff4040;
        border-radius:100%; 
    }

    <div class="circle"></div>

Height style property issue.

2 Answers2