[팁] [javascript] CSS와 자바스크립트를 이용하여 DIV 높이 height:100% 채우기
2015.08.20 06:41
509
0
https://eond.com/360821
object(HotopayModel)#862 (23) {
["error"]=>
int(0)
["message"]=>
string(7) "success"
["variables"]=>
array(0) {
}
["httpStatusCode"]=>
int(200)
["module"]=>
string(7) "hotopay"
["module_info"]=>
NULL
["origin_module_info"]=>
NULL
["module_config"]=>
NULL
["module_path"]=>
string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/"
["xml_info"]=>
NULL
["module_srl"]=>
NULL
["mid"]=>
NULL
["act"]=>
NULL
["template_path"]=>
NULL
["template_file"]=>
NULL
["layout_path"]=>
NULL
["layout_file"]=>
NULL
["edited_layout_file"]=>
NULL
["stop_proc"]=>
bool(false)
["user"]=>
object(Rhymix\Framework\Helpers\SessionHelper)#861 (20) {
["member_srl"]=>
int(0)
["user_id"]=>
NULL
["user_name"]=>
NULL
["nick_name"]=>
NULL
["email_address"]=>
NULL
["phone_number"]=>
NULL
["homepage"]=>
NULL
["blog"]=>
NULL
["birthday"]=>
NULL
["denied"]=>
NULL
["status"]=>
NULL
["is_admin"]=>
string(1) "N"
["is_site_admin"]=>
NULL
["profile_image"]=>
NULL
["image_name"]=>
NULL
["image_mark"]=>
NULL
["signature"]=>
NULL
["description"]=>
NULL
["group_list"]=>
array(0) {
}
["menu_list"]=>
array(0) {
}
}
["request"]=>
object(Rhymix\Framework\Request)#10 (13) {
["method"]=>
string(3) "GET"
["compat_method"]=>
string(3) "GET"
["url"]=>
string(32) "javascript/360821/comment/464740"
["hostname"]=>
string(8) "eond.com"
["domain"]=>
NULL
["protocol"]=>
string(5) "https"
["callback_function"]=>
string(0) ""
["_route_status":protected]=>
int(200)
["_route_options":protected]=>
object(stdClass)#11 (5) {
["cache_control"]=>
bool(true)
["check_csrf"]=>
bool(true)
["is_forwarded"]=>
bool(false)
["is_indexable"]=>
bool(true)
["enable_session"]=>
bool(true)
}
["module"]=>
string(5) "board"
["mid"]=>
string(10) "javascript"
["act"]=>
string(16) "dispBoardContent"
["args"]=>
array(5) {
["page"]=>
int(4)
["document_srl"]=>
string(6) "360821"
["comment_srl"]=>
string(6) "464740"
["mid"]=>
string(10) "javascript"
["act"]=>
string(16) "dispBoardContent"
}
}
["ajaxRequestMethod"]=>
array(2) {
[0]=>
string(6) "XMLRPC"
[1]=>
string(4) "JSON"
}
["gzhandler_enable"]=>
bool(true)
}
※ 출처 : http://1004lucifer.blogspot.kr/2014/04/css-div-width-height.html
출처는 위 url 입니다.
출처는 위 url 입니다.
이 방법은 자바스크립트와 CSS를 이용하여 div 높이를 100% 만드는 것입니다.
간단하게 CSS로는 {position:fixed;height:100%;top:0;left:0} 이런 식으로도 가능합니다.
<!DOCTYPE html><html><head lang="en"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { margin: 0; width: 100%; height: 100%; } #wrapperDiv { width: 100%; height: 200px; background-color: #C8BEB7; } #div1 { display: inline-block; width: 200px; height: 100%; background-color: #747474; } #div2 { display: inline-block; width: 500px; height: 100%; background-color: goldenrod; } </style> <script type="text/javascript"> function div2Resize() { var div2 = document.getElementById('div2'); div2.style.width = window.innerWidth - 200 + 'px'; } window.onload = function() { div2Resize(); // 브라우저 크기가 변할 시 동적으로 사이즈를 조절해야 하는경우 window.addEventListener('resize', div2Resize); } </script></head><body><div id="wrapperDiv"> <div id="div1">div1</div><!-- --><div id="div2">div2</div></div></body></html>
댓글 0
댓글작성칸으로