[css] 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;
}

추천0

댓글목록

등록된 댓글이 없습니다.

Total 770건 28 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
95 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15012 0 07-01
94 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14742 0 06-30
93 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14662 0 06-29
92 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16473 0 06-24
91 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16285 0 06-20
90 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15543 0 06-19
89 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14145 0 06-16
88 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15016 0 06-04
87 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13429 0 06-03
86 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14879 0 05-31
85 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18947 0 05-31
84 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 21598 0 05-29
83 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13195 0 05-29
82 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 20326 0 05-27
81 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17158 0 05-26
80 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14851 0 05-24
79 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14934 0 05-23
78 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14269 0 05-23
77 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14172 0 05-21
76 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13366 1 05-21
75 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14179 0 05-21
74 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16845 0 05-19
73 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14436 0 05-17
72 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15652 0 05-02
71 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 19005 0 05-02

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
7,608
어제
7,646
최대
8,233
전체
1,617,181
Copyright (c) 株式会社YHPLUS. All rights reserved.