How to add 100% height to the div in react without height 100vh

Question

Here is the code: I have a div on the left with a light blue colour and it should have a height of 100%

const styles = {width:'80px',backgroundColor:'rgb(241, 242, 250)',height:'100'}

function Leftdash () {
    return (
        <div>
            <div>
                <div style = {styles}>
                <div>hi</div>
                </div>
                
            </div>
        </div>
    )
}



ReactDOM.render(
  <Leftdash />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Do you want to have the background color for the whole page? — Abhilekh Gautam, Sep 09 '20 at 17:06
Not like that, see that 'hi' with the light blue color. That element has a width of 80px and need a height of 100% — Tony, Sep 09 '20 at 17:12
@Ramakay There is a need of flexibility. sometimes the size should change to other values. — Tony, Sep 09 '20 at 17:16

score 2 · Answer 1 · answered Sep 09 '20 at 17:14

2

you need to set the height of html and body tags (100%), also you need to set the height of all parent divs which are there, and after that, if your div's height will be set to 100% – it will fill with blue color all the height of your window

answered Sep 09 '20 at 17:14

rudevich

71
3

created a .css fie for the component,how ever it is not working with react – Tony Sep 09 '20 at 17:34
@Tony css should work fine with React, or any other library. Check the path to the file, or if it loaded correctly at Chrome Dev Tools / Network tab – rudevich Sep 09 '20 at 17:54

How to add 100% height to the div in react without height 100vh

1 Answers1