ReactJS - ant design - Fix Footer with Layout

ant design layout
ant design scrollbar
ant design pro
ant design header example
ant design grid
ant design bootstrap
ant design components
ant design background image

I am using ant design framework in my project with reactjs. I am trying to achieve a layout design in which the footer should stick to the bottom of the screen and header fixed to the top, only content should resize it should look like

--------------------------------
|          HEADER              | 
--------------------------------
|       |                      |
|       |                      |
| LIST  |       CONTENT        |
|       |                      |
|       |                      |
--------------------------------
|          FOOTER              | 
--------------------------------

Below is my live example what I am trying to do

https://codesandbox.io/embed/j4rkr509o3

I am not sure how to make it work, it would be very kind if any one can help me.

Cheers.

I don't believe ant supports this automatically, but you can just set the height of the content div to be 100vh - (header.height + footer.height). So in your example something like this:

<Content>
   <div style={{ background: "blue", height: "calc(100vh - 55px)" }}>
      text
   </div>
</Content>

Layout, Layout : The layout wrapper, in which Header Sider Content Footer or Layout We always put contents in a fixed size navigation (eg: 1200px ), the layout of the​  With ant.design, what is the right way to apply Affix to Header in a Layout so that it stays fixed at the top during scroll? Below is an example layout: import { Layout } from 'antd'; const { Hea Stack Overflow

You can try adding position: sticky to your <Header> and <Footer>, and specify the location (i.e. top, bottom) you want them to stick to.

To achieve your goal, you can try:

<Header style={{ position: "sticky", top: "0" }}>

<Footer style={{ position: "sticky", bottom: "0" }}>

Hope that helps, cheers :)

Affix, Fixed at the top of container. Container to scroll. Set a target for 'Affix', which is listen to scroll event of target element (default is window ). expand code. Layout: The layout wrapper, in which Header Sider Content Footer or Layout itself can be nested, and can be placed in any parent container. Header: The top layout with the default style, in which any element can be nested, and must be placed in Layout.

You can use the Sider for side bar and set position: absolute to the main layout with 100% height and width

Here codesandbox

Also it was not working the layout component because you did not include antd.css for codesandbox

Ant Design React Footer stuck in content · Issue #15066 · ant-design , I am trying to create a layout using Ant Design where the footer should be at the bottom of the page and only visible when scrolling to the  Ant Design ReactJS Admin with Bootstrap. Author’s note: As an elite author who focuses on building admin templates for 5+ years (portfolio here), Ant admin is my best work, and the price is still the same, only $24! Intro. Ant Design Admin is a super powerful admin dashboard template built with ReactJS and Bootstrap.

Make your own sticky footer https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Then populate the rest of your site with AntD components.

How to set 100% of height layout · Issue #4926 · ant-design/ant , How to set 100% of height layout (screen) import React from 'react'; Sider, Content, Footer} = Layout; import {Row, Col} from 'antd'; import  Ant Design's two typical adaptation type: 1. Left-Right Layout # Commonly used in design schemes for left and right layouts, the common practice is to fix the left navigation bar and dynamically scale the right work area. 2. Top-Bottom Layout # Common used in design schemes for top and bottom layouts.

Layout, Layout : The layout wrapper, in which Header Sider Content Footer or Layout We always put contents in a fixed size navigation (eg: 1200px ), the layout of the​  An out-of-box UI solution for enterprise applications as a React boilerplate. This repository is the layout of Ant Design Pro and was developed for quick and easy use of the layout.

React + Ant.design: A perfect match for prototyping your MVP , towards and MVP? Read all about the magic combination of React + Ant.​design. Footer: A bottom layout component with some default styling. > What would it A fixed set of components also lets your application be less flexible. The team  ReactJS - Build a Responsive Navigation Bar & Side Drawer Tutorial - Duration: 49:44. Academind 125,070 views

Styling React Applications with Ant.Design - Yoni Weisbrod, Ant (GitHub) is much more than a React UI kit with a minimalist design aesthetic and Layout includes components for a Sider, Header, Content, and Footer. Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection , alignItems , and justifyContent to achieve the right layout. Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.

Comments
  • I had tried to use calc but somehow it was deducting 50vh than 50px.
  • Are you defining the height inline or in your less file? If via less, it could be you're having the problem reported here stackoverflow.com/questions/27256849/…. The answer has a simple fix.
  • Yes I am using .less I will try the solution, thanks.
  • position: sticky is no go if you want IE support
  • @Yichaoz if you want IE support, another way I can think of is to use position: fixed. However by doing so, you'll have to do some additional styling to get to the desired look.
  • It does solve, but I want the content to scroll within the screen above footer, and footer not to go out of screen, thanks for pointing out antd.css I was wondering why it doesn't render.
  • that will be completely different solution, since the footer doesn't know if the body has overflow or not. you will need to layout manually without using Layout component, and set content container to <div style={{ minHeight: "calc(100vh - 70px)" }}> . where 70px is the height of the footer + header. but calc() is only supported IE11 +
  • Thanks, for reply I am not worried about IE right now, I tried to use calc to determine the height of the content, but there seems to be problem with this as in your case it turns to 30vh as it takes 70px as vh not px which changes the whole thing. Can you put more light into it?