CODEWITHSUNDEEP
cssreactjs
mouchin777
mouchin777

Reputation: 1588

Unable to setup 100% height in react css

Im doing a react app that prints multiple "elements" like if it was some sort of calendar. But im trying to setup a background-color so it will cover the background behind all the cubes, but seems impossible to do.

I basically have this

Calendario.jsx

 render() {
        return (
            <div className="container">
                <CalendarGrid weeks={this.getLivedWeeks()}/>
            </div>
        )
    }

CalendarGrid.jsx

    render() {
    let rows = []
    for (let i = 0; i<this.props.weeks;i++){
      rows.push(<CalendarFields key={i} />)
    }
    return <h1>{rows}</h1>

  }

Then in calendario.css

I've applied this

.container{
    background-color:yellow;
    height:100%;
}

But it wont display anything. Meanwhile if I put 

 .container{
        background-color:yellow;
        height:100vh;
    }

It works just as I want it, but it only covers the 100vh , but my screen happens to take more than 100vh since I have to scroll down, so thats not the solution.

I dont understand why height: 100% wont work there

This is how it happens to looks with 100vh

100vh result

Upvotes: 0

Views: 1465

Answers (2)

akhtarvahid
akhtarvahid

Reputation: 9769

When dealing with widths, the % unit is more suitable. With heights, the vh unit is better.

Key Differences----

height: 100vh = 100% of the viewport height

height: 100% = 100% of the parent's element height

That's why you need to add height: 100% on html and body, as they don't have a size by default

Something you have to know : if you use % for vertical margin or padding, % will be calculated on the width of the parent element, not the height.

Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw); (for example)

% vs vh

Upvotes: 1

Shirish Maharjan
Shirish Maharjan

Reputation: 502

Now in your example the div contains only floated elements. This makes it collapse to a height of 0px. The adjacent calendar Grid will appear to the left/right of the floated div because they are considered as normal floated elements.

Now declaring overflow establishes a new block formatting context, which makes the div contains its children. Suddenly the div "reappears", not having size 0px anymore. The calendar grid is getting pushed to the bottom.

Upvotes: 1

Related Questions