CODEWITHSUNDEEP
htmlcssreactjssemantic-ui
user7674254
user7674254

Reputation: 87

Make main div resize on show/hide

I have an application that has a top menu, header, content, and footer. The height of the content is calc(100vh - 40px), without the header in footer. But I need the content to automatically resize to the window height based on the hide/show state of the header and footer. Is there a CSS setting to do this without having to manually call a function to check if the header/footer is there and adjust the height accordingly? As it stands, when I hide the header or footer or both, the content just moves and shows white space.

Note: I have messed around with height, overflow, display, and position styling to no avail. Setting the height to anything but a specific value, e.g. 100vh, makes the content disappear.

<Menu style={{height: '40px'}} />
<div style={{height: 'calc(100vh - 40px)}}>
   <Header style={{height: '40px'}} />
   <Content style={{display: block}} />
   <Footer style={{height: '40px'}} />
</div>

Upvotes: 0

Views: 279

Answers (1)

user7674254
user7674254

Reputation: 87

Figured it out. Put display: flex and flex-direction: column on the div, and flex: 1 on the content. Now resizes accordingly to showing and hiding the header/footer.

Upvotes: 1

Related Questions