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

본문 바로가기
사이트 내 전체검색

팁앤테크

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;
}

댓글목록

등록된 댓글이 없습니다.

Total 766건 1 페이지
팁앤테크 목록
번호 제목 글쓴이 조회 날짜
766 css zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 479 06-15
열람중 css zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1332 05-28
764 php zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1679 05-06
763 mysql zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2798 03-27
762 php zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2882 03-25
761 php zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2780 03-25
760 g5 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2785 03-20
759 php zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2524 03-16
758 php zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2285 03-16
757 mysql zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2175 03-04
756 php zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2353 02-29
755 g5 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2892 02-10
754 mysql zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2882 02-06
753 PC zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3316 01-18
752 mysql zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3865 01-09

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒171-0014 東京都豊島区池袋2-41-5 アーバン154 8F
03-3984-3703

접속자집계

오늘
285
어제
361
최대
11,987
전체
1,771,246
Copyright (c) 株式会社YHPLUS. All rights reserved.