[css] CSS만으로 가변영역 / 고정영역 Column 레이아웃을 구현하는 방법 > 팁앤테크

• 목록

• 페이스북 공유
• 트위터 공유
• 

<div class = "wrapper">
    <div class = "main">
        <!-- 가변 영역 -->
    </ div>
    <div class = "side">
        <!-- 고정 영역 -->
    </ div>
</ div>
 

< float + negative margin >

.wrapper {
    overflow : hidden;
}
.main {
    float : left;
    width : 100 %;
    margin-right : -300px;
    padding-right : 300px;
    box-sizing : border-box;
}
.side {
    float : right;
    width : 300px;
}


< float + calc method >

.wrapper {
    overflow : hidden;
}
.main {
    float : left;
    width : -webkit-calc (100 % - 300px);
    width : calc (100 % - 300px);
}
.side {
    float : right;
    width : 300px;
}

< Table >

.wrapper {
    display : table;
    width : 100 %;
}
.main,
.side {
    display : table-cell;
    vertical-align : top;
    text-align : left;
}
.side {
    width : 300px;
}


< Flex Box >

.wrapper {
    display : -webkit-flex;
    display : flex;
}
.main {
    -webkit-flex : 1;
    flex : 1;
}
.side {
    width : 300px;
}