Footer fixed

브라우저 크기를 줄였을 때 footer 크기를 그대로 유지할려면 #footer min-width 1920px 혹은 .wrap min-width 1920px 을 주면 됩니다.

                              
<div id="wrap">
    <div id="footer">
        <div class="inner">
            <div class="logoArea">
                <a href="#">
                    <img src="" alt="">
                </a>
            </div>
            <div class="linkContainer">
                <div class="linkArea">
                    <ul>
                        <li>
                            <a href="#" title="link01">link01</a>
                        </li>
                        <li>
                            <a href="#" title="link02">link02</a>
                        </li>
                        <li>
                            <a href="#" title="link03">link03</a>
                        </li>
                        <li>
                            <a href="#" title="link04">link04</a>
                        </li>
                    </ul>
                </div>
                <div class="linkArea">
                    <ul>
                        <li>
                            <a href="#" title="link05">link05</a>
                        </li>
                        <li>
                            <a href="#" title="link06">link06</a>
                        </li>
                        <li>
                            <a href="#" title="link07">link07</a>
                        </li>
                        <li>
                            <a href="#" title="link08">link08</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bottomArea">
                <div class="inner">
                    <p class="copy">Copyright © 2021 Company. ALL RIGHTS RESERVED.</p>
                </div>
            </div>
        </div>
    </div>
</div>

                              
#footer{position: absolute; bottom: 0; width: 100%; background-color: #292a2d;
    >.inner{padding: 40px; max-width: 1200px; margin: 0 auto;
        .logoArea{margin-bottom: 20px;
            a{display: inline-block;}
            img{width: 200px;}
        }
        .linkContainer{display: flex; padding-bottom: 40px; border-bottom: 1px solid #fff;}
        .linkArea{flex: 0.5; margin-left: auto;
            ul{display: flex; flex-direction: column;
                li{ 
                    a{font-size: 16px; font-family: 'Noto Sans'; color: #fff;
                        &:hover{text-decoration: underline;}
                    }
                    +li{margin-top: 10px;}
                }
            }
        }
        .bottomArea{
            >.inner{height: 58px; line-height: 58px;
                p.copy{font-size: 14px; color: #fff; font-family: '맑은 고딕'; text-align: center;}
            }
        }
    }
}

                              

#wrap #footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #292a2d;
}

#wrap #footer > .inner {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

#wrap #footer > .inner .logoArea {
    margin-bottom: 20px;
}

#wrap #footer > .inner .logoArea a {
    display: inline-block;
}

#wrap #footer > .inner .logoArea img {
    width: 200px;
}

#wrap #footer > .inner .linkContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 40px;
    border-bottom: 1px solid #fff;
}

#wrap #footer > .inner .linkArea {
    -webkit-box-flex: 0.5;
    -ms-flex: 0.5;
        flex: 0.5;
    margin-left: auto;
}

#wrap #footer > .inner .linkArea ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}

#wrap #footer > .inner .linkArea ul li a {
    font-size: 16px;
    font-family: 'Noto Sans';
    color: #fff;
}

#wrap #footer > .inner .linkArea ul li a:hover {
    text-decoration: underline;
}

#wrap #footer > .inner .linkArea ul li + li {
    margin-top: 10px;
}

#wrap #footer > .inner .bottomArea > .inner {
    height: 58px;
    line-height: 58px;
}

#wrap #footer > .inner .bottomArea > .inner p.copy {
    font-size: 14px;
    color: #fff;
    font-family: '맑은 고딕';
    text-align: center;
}

다운로드

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.