그누보드 QA - 레이아웃으로 고생중입니다. 조언 부탁드립니다.

레이아웃으로 고생중입니다. 조언 부탁드립니다.

헐크매니아 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017.04.03 11:00:23 3889 (165.♡.♡.100)

답변 2

본문

아래 코드를 해보시면 ie11, 크롬은 잘되는데

ie9버전과 파이어폭스는 무려 최신버전임에도 깨집니다.

css에서 table과 table-cell이 지원이 안되는건가 잘 안되네요.

조언좀 부탁드립니다.


<!DOCTYPE html>
<html>
<head>
<style>
html,body{
        height: 100%;
        width: 100%;
        padding-top: 0px;
        padding-left: 0px;
    }
    
.wrap{
    height: 100%;
    width: 100%;
    display: table;
    }
    
#left{
    height: 100%;
    width: 100%;
    display: table-cell;
    background-color: aqua;
    }
    
#right{
    height: 100%;
    display: table-cell;
    background-color: burlywood;
    }
    
#right2{
    height: 100%;
    width: 300px;
    background-color: crimson;
    }
#chat{
    height: 100%;
    width: 300px;
    position: fixed;
    top: 0px;
    right: 0px;
    background-color: darkmagenta;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#tgl").on("click", function(e) {
		e.preventDefault();
		$("#right2,#chat").animate({
			width : "toggle"
		}, 1000);
	});
});
</script>
</head>
<body>
<a href="#" id="tgl">toggle</a>
<div class="wrap">
    <div id="left"></div>
    <div id="right">
        <div id="right2"></div>
    </div>
    <div id="chat"></div>    
</div>
 
</body>
</html>