선생님 footer 질문있습니다..

[정중식]

상황이 매우 거시기해요..
사진에서 보는 바와같이 포지션:앱솔루트 바텀:0 줬을때입니다.
TOP부분을 잘 봐주세요


이렇게보기엔 이상없어보여요
그런데.. 스크롤을내리면

???? 이렇게됩니다.
여기까지가 코드는 이렇습니다.

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  position: relative;
  width: 120px;
  height: 350px;
  min-height: 300px;
  border: 1px solid #eee;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 10px;
`;
const Title = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #444444;
  color: white;
  margin-bottom: 10px;
  span {
    color: #444444;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: white;
  }
`;

const List = styled.div`
  margin: auto;
  text-align: center;
  padding: 5px;
`;

const Item = styled.div`
  width: 100%;
  height: 100%;
  min-height: 100px;
  border: 2px solid #eee;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d4d5cd;</pre>
<pre>  img {
    width: 100%;
    max-width: 50px;
    object-fit: cover;
  }
`;

const Footer = styled.div`
  
  background: #eee;
  color: white;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
`;

const SeeProduct = () => {
  return (
    <Container>
      <Title>
        <h5>CART</h5>
        <span>0</span>
      </Title>
      <List>
        <span>최근본상품</span>
        {/* <Item>
          <img
            src='https://w.namu.la/s/dab366b5e86aa89c99444aa87f7b314e7738b49e2d95f2cfc3c3715507539c0b6848ddb5610b3945594d2cc9bf41dc82080c3e4e6337cc7d55874ece36e1d136c737af944cf2697938ab4302e46d543f117ab9b1d29b20f2892ef1dd1ceda18a98ba6911a871a40182fd6278f5ad8b9b'
            alt='.'
          />
        </Item> */}
        <Item>
          <img
            src='https://w.namu.la/s/dab366b5e86aa89c99444aa87f7b314e7738b49e2d95f2cfc3c3715507539c0b6848ddb5610b3945594d2cc9bf41dc82080c3e4e6337cc7d55874ece36e1d136c737af944cf2697938ab4302e46d543f117ab9b1d29b20f2892ef1dd1ceda18a98ba6911a871a40182fd6278f5ad8b9b'
            alt='.'
          />
        </Item>
        <Item>
          <img
            src='https://w.namu.la/s/dab366b5e86aa89c99444aa87f7b314e7738b49e2d95f2cfc3c3715507539c0b6848ddb5610b3945594d2cc9bf41dc82080c3e4e6337cc7d55874ece36e1d136c737af944cf2697938ab4302e46d543f117ab9b1d29b20f2892ef1dd1ceda18a98ba6911a871a40182fd6278f5ad8b9b'
            alt='.'
          />
        </Item>
        <Item>
          <img
            src='https://w.namu.la/s/dab366b5e86aa89c99444aa87f7b314e7738b49e2d95f2cfc3c3715507539c0b6848ddb5610b3945594d2cc9bf41dc82080c3e4e6337cc7d55874ece36e1d136c737af944cf2697938ab4302e46d543f117ab9b1d29b20f2892ef1dd1ceda18a98ba6911a871a40182fd6278f5ad8b9b'
            alt='.'
          />
        </Item>
      </List>
      <Footer>
        <span>TOP Δ</span>
      </Footer>
    </Container>
  );
};

export default SeeProduct;

그러면 Footer 포지션 앱솔루트->스티키로 변경해봤습니다.

스크롤을 내려도 잘되는군여..
근데 문제는 최근 본상품이 한두개일경우


이렇게되버립니다.

그러면 다른방식으로 풀어가보자해서 List에 포지션:relative 주고 
Footer을 List안에 포함시키는거를하면, 잘되는데 위의 이미지처럼 스크롤내리면 저렇게되버려요
방법이없을까요?

[codingapple]

position fixed도 써봅시다

[글쓴이]

글