Closed7

CSS覚書

U (ユウ)U (ユウ)

Chat

U (ユウ)U (ユウ)
  • 文字の長さにwidthを合わせる
 width: fit-content;
  • block左寄せ
position: relative;
margin-left: auto;
  • スクロールできるフィールドにする
{maxHeight: 200, overflow: 'auto'}
U (ユウ)U (ユウ)

画面を左右に分ける

<Box sx={{ display: 'flex' }}>
    <Box component="nav" sx={{ flexShrink: 0, width: 240 }}>
    </Box>
    <Box component="main" sx={{ flexGrow: 1 }}>
    </Box>
</Box>
U (ユウ)U (ユウ)
  • 高さを画面いっぱいに合わせる
height: 100vh
  • 一番下に固定
bottom: 0
position: fixed
  • position: fixedで固定した時に幅が自動調節されなくなる
    →仕様なのでwidthを指定して解決する
witdh: 100px
このスクラップは2022/12/12にクローズされました