Flex box 3列布局与粘性页脚

Question

我遇到了弹性布局问题，我发现here。它来自this guy。问题是页脚与页面一起向下滚动，而不是停留在内容的底部或页面底部，如果没有足够的内容。我的意思是

代码适用于React组件，但很容易理解。

任何帮助都非常感激。

＆＃13;

＆＃13;

//// 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')
);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须使用min-height代替height

此

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

应该是

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

＆＃13;

＆＃13;

//// 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')
);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您希望页脚粘贴到页面底部，请使用此

//// 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: '30px',
  		position: 'fixed',
  		bottom: 0,
  		left: 0,
  		width: '100%'
    }
    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>

Answer 3

我最初编写了自己的React layout library "Re-Flex"来处理可调整大小的窗格和复杂的嵌套布局。如果有一天你决定在你的页面上添加一个可调整大小的窗格，那么这可能对你想要完成的事情有些过分。

doc中的一个示例是带有粘性页眉和页脚的完整布局：

<style name="MyDialogFragmentStyl" parent="ThemeOverlay.AppCompat.Dialog">
    <item name="android:windowBackground">@drawable/my_dialog_background</item>
</style>