第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

頁腳不粘在 React 頁面的底部

頁腳不粘在 React 頁面的底部

烙印99 2023-04-14 17:31:05
我創(chuàng)建了一個頁腳并將其放在 app.jsx 文件中以顯示在每個頁面上。但是,如果頁面上的內(nèi)容沒有占據(jù)整個頁面,頁腳就會浮起來。我需要更新 index.html 嗎?頁腳:<Grid container spacing={2} className={classes.container}>  <Grid xs={12}>    <a href='https://twitter.com/loremipsum'>      <SocialIcons>        <FaTwitter className={classes.icon} />      </SocialIcons>    </a>    <a href='https://www.facebook.com/loremipsum'>      <SocialIcons>        <FaFacebookSquare className={classes.icon} />      </SocialIcons>    </a>    <a href='https://www.linkedin.com/company/loremipsum'>      <SocialIcons>        <FaLinkedin className={classes.icon} />      </SocialIcons>    </a>  </Grid></Grid>頁腳樣式:export const useStyles = makeStyles({container: {backgroundColor: 'black',color: '#F5F5F5',borderTop: '5px solid #669999',marginTop: 20,},icon: {width: 20,height: 20,color: '#669999',marginTop: 10,marginBottom: 10,marginLeft: 10,marginRight: 10,},});export const SocialIcons = styled.div`transition: transform 250ms;display: inline-block;&:hover {transform: translateY(-2px);  }`;Index.html 正文<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
查看完整描述

2 回答

?
繁花如伊

TA貢獻(xiàn)2012條經(jīng)驗 獲得超12個贊

我通過將所有內(nèi)容放在一個頁面容器中并在除頁腳之外的所有內(nèi)容中放置一個內(nèi)容包裝器來獲得它。


應(yīng)用程序.jsx


const App = () => (

  <div className='App'>

    <div className='page-container'>

      <div className='content-wrapper'>

        <NavigationBar />

      </div>

      <Footer />

   </div>

 </div>`);`

應(yīng)用程序.css


.page-container {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

.content-wrapper {

  flex: 1;

}


查看完整回答
反對 回復(fù) 2023-04-14
?
30秒到達(dá)戰(zhàn)場

TA貢獻(xiàn)1828條經(jīng)驗 獲得超6個贊

這個想法是要有固定的頁腳高度和主要內(nèi)容高度,即所有高度減去頁腳高度。


你的模板代碼應(yīng)該是這樣的:


<div id="root">

  <main>

    Some main content

  </main>

  <footer>

    Some footer content

  </footer>

</div>

款式:


#root {

  main {

    min-height: calc(100vh - 100px); 

  }

  footer {

    height: 100px;

  }

}


查看完整回答
反對 回復(fù) 2023-04-14
  • 2 回答
  • 0 關(guān)注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號