Full height & width without scrollbar in Material UI React app

Question

I am trying to render a page for full height. But it adds a scrollbar which is undesirable. With 100% height, I mean just the size of the screen.

Here is the demonstration. The yellow highlighted part is the unwanted height added. There is also a horizontal scrollbar(not highlighted):

Here is the render method of the page:

return (
    <>
        <Box display='flex' flex='1' justifyContent='space-around'>
            <IndexSelector
                id='index'
                value={symbol}
                onChange={this.onSymbolChange}/>
            <SeriesSelector
                id='series'
                seriesList={Form.seriesList}
                onChange={this.onSeriesChange}/>
            <DateRange fromDate={fromDate} toDate={toDate} onChange={this.onDateChange}/>
        </Box>

        <Box height='100%' border='1px solid red' marginTop='50px'>
            <Graph instructions={this.getInstructions()} apiData={this.apiData} />
        </Box>
    </>
)

Here is the index.css:

html {
  box-sizing: border-box;
}

html, body, #root {
  padding: 0px !important;;
  margin: 0px !important;;
  height: 100vh;
  width: 100vw;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
  monospace;
}

How to avoid this extra height & width and make the red border boxed container full height?

EDIT: As per @gowatham suggestion, I tried and it didn't work. I got the following result:

EDIT 2:

HTML: https://pastebin.com/Qu2RFHe7 CSS: https://pastebin.com/1z3Zg5rv

don't use 100%, use 100vh. 100vh is the full height of the browser window. — cloned
– cloned, Commented Aug 13, 2019 at 9:23
@cloned one thing to note when using 100vh is if you have a horizontal scrollbar 100vh will give you a vertical scrollbar too, 100% won't — Pete
– Pete, Commented Aug 13, 2019 at 9:27
@conquester please can you make a minimal reproducible example with your rendered code and css so we can see what the problem is — Pete
– Pete, Commented Aug 13, 2019 at 9:27
I changed 100% to 100vh in the Box props but still the scrollbars are there. — conquester
– conquester, Commented Aug 13, 2019 at 9:29
Most likely because you have a 2 boxes on top of each other and one of them is the height of the screen so the window will scroll the amount of the first box height — Pete
– Pete, Commented Aug 13, 2019 at 9:30

Markus-ipse · Accepted Answer · 2021-01-22 22:10:44Z

38

If you set the main container to be 100vh, i.e. 100% of viewport height, and make it a display its children with a flex column direction, then you can just make the result container take all the remaining space by setting it to flex: 1 and make its content scroll by also setting overflow: auto

The benefit of this approach is that you can let the filter container be of any/dynamic height and it'll still work.

<Box height="100vh" display="flex" flexDirection="column">
  <Box>Filter</Box>
  <Box flex={1} overflow="auto">
    {Array.from(Array(100)).map((v, i) => (
      <div key={i}>Testing {i}</div>
    ))}
  </Box>
</Box>

https://codesandbox.io/s/material-demo-ntvoj

Another possible solution, that would probably work in ancient browsers as well, is to just set the filter container to position: fixed and then make sure that element that directly follows the filter container has either margin-top or padding-top that is enough to prevent it's content from appearing behind the filter div when the page is scrolled to the top.

<Box
  position="fixed"
  top={0}
  height="60px"
  width="100%"
>
  Filter
</Box>
<Box marginTop="60px">
  {Array.from(Array(100)).map((v, i) => (
    <div key={i}>Testing {i}</div>
  ))}
</Box>

https://codesandbox.io/s/material-demo-4m85i

edited Jan 22, 2021 at 22:10

answered Aug 20, 2019 at 19:53

Markus-ipse

7,4064 gold badges31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheDiveO Over a year ago

Your solution works also for what I could imagine a typical usecase of a Material UI react application with a taskbar along the top and then the content rendered below and scrolling including the scroll bars strictly applied only to the content area below the taskbar. With your solution, the bottom horizontal scrollbar always stays within view when needed. Thank you very much!

G M Over a year ago

+1 Best solution I've seen so far. It's dynamic so it doesn't rely on sizes of headers, footers, etc. This should be accepted answer

Jee Mok · Accepted Answer · 2019-08-17 03:34:42Z

17

+50

Don't give up! CSS styling can be tricky when you first started, but it is actually quite straight forward after you plan your page layout.

I would do 90vh for the body and set 10vh for the filter box that you have above, so it will always be only 100vh on the page, unless you wanted to change the layout. So I would have something like this:

return (
  <div style={{ height: '90vh', margin: 0, padding: 0 }}>
    <Box display='flex' flex='1' justifyContent='space-around' style={{ height: '10vh' }}>
        <IndexSelector
            id='index'
            value={symbol}
            onChange={this.onSymbolChange}/>
        <SeriesSelector
            id='series'
            seriesList={Form.seriesList}
            onChange={this.onSeriesChange}/>
        <DateRange fromDate={fromDate} toDate={toDate} onChange={this.onDateChange}/>
    </Box>

    <Box style={{ maxHeight: "100%", overflow: "auto" }}>
        <Graph instructions={this.getInstructions()} apiData={this.apiData} />
    </Box>
  </div>
)

Note that your border 1px might also increase the 100% and you might see a scrollbar. To force hide the scrollbar, just add overflow: hidden to the parent div. Example on CodeSandbox:

answered Aug 17, 2019 at 3:34

Jee Mok

6,6068 gold badges54 silver badges83 bronze badges

1 Comment

Lauris Kuznecovs Over a year ago

Actually adding height: 90vh to second <Box> should work. Then all page is allocated.

Akram Badah · Accepted Answer · 2019-08-20 09:52:46Z

Try subtracting box1 height from box2 height create a ref to box1:

ref={(ref) => this.box1 = ref}

Then in box2:

height={`calc(100% - ${this.box1.clientHeight}px)`}

Like this:

return (
    <>
        <Box display='flex' flex='1' justifyContent='space-around' ref={(ref) => this.box1 = ref}>
            <IndexSelector
                id='index'
                value={symbol}
                onChange={this.onSymbolChange}/>
            <SeriesSelector
                id='series'
                seriesList={Form.seriesList}
                onChange={this.onSeriesChange}/>
            <DateRange fromDate={fromDate} toDate={toDate} onChange={this.onDateChange}/>
        </Box>

        <Box height={`calc(100% - ${this.box1.clientHeight}px)`} border='1px solid red' marginTop='50px'>
            <Graph instructions={this.getInstructions()} apiData={this.apiData} />
        </Box>
    </>
)

gowtham · Accepted Answer · 2019-08-13 10:27:04Z

2

Try to include Flex for the Parent also

<div display='flex' flex='1' height='100%' justifyContent='space-between'> //use flex direction column as per your library     
        <Box display='flex' flex='1' justifyContent='space-around'>
            <IndexSelector
                id='index'
                value={symbol}
                onChange={this.onSymbolChange}/>
            <SeriesSelector
                id='series'
                seriesList={Form.seriesList}
                onChange={this.onSeriesChange}/>
            <DateRange fromDate={fromDate} toDate={toDate} onChange= 
   {this.onDateChange}/>
        </Box>
        <Box>
            <Graph instructions={this.getInstructions()} apiData={this.apiData} />
        </Box>
    </div>

answered Aug 13, 2019 at 10:27

gowtham

563 bronze badges

3 Comments

conquester Over a year ago

I have updated the question with the result I got. It didn't work :-(

gowtham Over a year ago

Use 100vh in parent instead of 100%. 100% take upto max of height of all content. That won't enllarge after that. 100vh is used for vertical height of whole window. Please try that

conquester Over a year ago

Tried that. It still did not work. I have almost given up on solving this issue.

MUDDASSIR ALI RANA · Accepted Answer · 2022-04-19 10:28:21Z

2

css Use height: '100vh'in parent instead of 100%. 100% take upto max of height of all content. That won't enllarge after that. 100vh is used for vertical height of whole window and also check the overflow-y

answered Apr 19, 2022 at 10:28

MUDDASSIR ALI RANA

512 bronze badges

Comments

strek · Accepted Answer · 2019-08-19 17:09:07Z

0

I made the navigation division height:15vh the division following it with height:20vh and the last division with height:65vh adding it to 100 vh ie total device height you can change it as per your wish and alter the height of the divisions. The scroll doesnt appear in the desktop view now

Here is the link to the codepen It is responsive for me check whether it works. (Ive used the pastebin code that you have provided with)

answered Aug 19, 2019 at 17:09

strek

1,2401 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

Full height & width without scrollbar in Material UI React app

6 Answers 6

2 Comments

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related