yoK0 yoK0 - 3 months ago 11
CSS Question

Flex box 3 column layout with sticky footer

Ive got a problem with flex layout I found here. Its from this guy . The problem is that footer scrolls down together with the page, instead of staying at the bottom of the content or at the bottom of the page if there isn't enough content. What I mean by that is

enter image description here

The code is for React components but it is easy to figure out.

Any help much appreciated.



//// All styles are in Layout component.

/////////// LAYOUT START ////////////////

class Layout extends React.Component {
constructor() {
super();
}

render() {

// STYLES START HERE

const styleLayout = {
siteWrapper: {
display: 'flex',
flexDirection: "column",
height: '100vh'
},
site: {
display: 'flex',
flexGrow: '1',
background: 'pink'
},
siteContent: {
flexGrow: '1',
paddingTop: '80px',
background: 'lightgreen',
},
rightColumn : {
width: '200px',
paddingTop: '80px',
background: 'lightblue'
},
leftColumn : {
order: '-1',
width: '200px',
paddingTop: '80px',
background: 'honeydew'
}
}


return (

<div style={styleLayout.siteWrapper}>
<Header />

<div style={styleLayout.site}>

<div style={styleLayout.siteContent}>
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content
</div>

<div style={styleLayout.leftColumn}>
<LeftColumn />
</div>

<div style={styleLayout.rightColumn}>
<RightColumn />
</div>

</div>
<Footer />
</div>
);
}
}

//////////// COMPONENTS START

class RightColumn extends React.Component {
render() {

return (
<div >Right Column</div>
);
}
}


class LeftColumn extends React.Component {
render() {

return (
<div >Left dsargsrtdgfeadcsfdsColumn</div>
);
}
}

class Header extends React.Component {

constructor(props) {
super(props)
}

render() {
const styleHeader = {
background: 'olivedrab'
}
return (
<div style={styleHeader}>
<h2> Header</h2>
</div>

);
}
}


class Footer extends React.Component {
render() {
const styleFooter = {
backgroundColor: 'grey',
height: '100px',
}
return (
<footer style={styleFooter}>footer</footer>
);
}
}

/////////// COMPONENTS END ////////////////


ReactDOM.render(
<Layout />

,document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>




QoP QoP
Answer

You have to use min-height instead of height

this

siteWrapper: {
          display: 'flex',
          flexDirection: "column",
          height: '100vh'
}

should be

siteWrapper: {
           display: 'flex',
           flexDirection: "column",
           minHeight: '100vh'
}

//// All styles are in Layout component. 

///////////  LAYOUT START  ////////////////

class Layout extends React.Component {
  constructor() {
    super();
  }

  render() {
    
    // STYLES START HERE
    
    const styleLayout = {
      siteWrapper: {
              display: 'flex',
              flexDirection: "column",
              minHeight: '100vh'
      },      
      site: {        
              display: 'flex',
              flexGrow: '1',
              background: 'pink'   
      },
      siteContent: {        
              flexGrow: '1',
              paddingTop: '80px',
              background: 'lightgreen',  
      },
      rightColumn : {            
            width: '200px',
            paddingTop: '80px',
            background: 'lightblue'
      },
      leftColumn : {
            order: '-1',
            width: '200px',
            paddingTop: '80px',
            background: 'honeydew'
      }
    }
    

    return (
       
        <div style={styleLayout.siteWrapper}>               
            <Header />  
        
            <div style={styleLayout.site}>
                
                <div style={styleLayout.siteContent}>
                    dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
       dummy content dummy content dummy content dummy content dummy content
                </div> 
                
                <div style={styleLayout.leftColumn}>
                    <LeftColumn />
                </div>
                
                <div style={styleLayout.rightColumn}>
                    <RightColumn />
                </div>

            </div>
            <Footer />
      </div>    
    );
  }
}

////////////  COMPONENTS START

class RightColumn extends React.Component {
  render() {
  
    return (
      <div >Right Column</div>
    );
  }
}


class LeftColumn extends React.Component {
  render() {

    return (
      <div >Left dsargsrtdgfeadcsfdsColumn</div>
    );
  }
}

class Header extends React.Component {

  constructor(props) {
    super(props)  
  }

  render() {
    const styleHeader = {
      background: 'olivedrab'
    }
    return (
      <div style={styleHeader}>
         <h2> Header</h2>
        </div>
      
    );
  }
}


class Footer extends React.Component {
  render() {
  	const styleFooter = {
  		backgroundColor: 'grey',
  		height: '100px',
    }
    return (
      <footer style={styleFooter}>footer</footer>
    );
  }
}

///////////  COMPONENTS END  ////////////////


ReactDOM.render(
<Layout />
 	
,document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>