#実施したいこと
box-downを割り当てたdivをリサイズしたときに、box-upのdiv要素もリサイズして上下が常にフル画面で表示され続ける状態を作りたいと思っています。
#現在のコードと現状の動き
box-downを上にリサイズすると、画面の下部に空白ができ、同時にbox-upと被ってしまう状態です。
下にリサイズした場合、画面からオーバーフローし、resizableのパラメーターminHeightが適用されてしまいます。
CSS
1#sidebar { 2 float: left; 3 width: 20%; 4 height: 100%; 5} 6 7#box-up { 8 float: left; 9 width: 80%; 10 height: 80%; 11} 12 13#box-down { 14 float: left; 15 width: 80%; 16 height: 20%; 17}
JavaScript
1 $('#box-down') 2 .resizable({ 3 handles:'n', 4 start: function(e, ui) {}, 5 resize: function(e, ui) { 6 7 var up = $('#box-up'); 8 var down = $('#box-down'); 9 var window_height = window.innerHeight; 10 11 var up_height = window_height - down.innerHeight(); 12 up.css('height', up_height); 13 14 }, 15 stop: function(e, ui) {} 16 });
2016/12/23 12:18追加
1ファイルに纏めたHTMLを貼り付けました。
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Example</title> 9 10 <!-- jQuery 1.12.4 --> 11 <script src="/js/jquery.min.js"></script> 12 13 <!-- jQuery UI 1.11.4--> 14 <script src="/js/jquery-ui.min.js"></script> 15 <link rel="stylesheet" href="/css/jquery-ui.min.css"> 16 17 <style> 18 html, 19 body { 20 margin: 0; 21 padding: 0; 22 width: 100%; 23 height: 100%; 24 } 25 26 #sidebar { 27 float: left; 28 width: 20%; 29 height: 100%; 30 background-color: #1b6d85; 31 } 32 33 #box-up { 34 float: left; 35 width: 80%; 36 height: 80%; 37 background-color: #0f0f0f; 38 } 39 40 #box-down { 41 float: left; 42 width: 80%; 43 height: 20%; 44 background-color: #2b542c; 45 } 46 </style> 47 48 <script> 49 $(function() { 50 $('#box-down') 51 .resizable({ 52 handles:'n', 53 start: function(e, ui) {}, 54 resize: function(e, ui) { 55 56 var up = $('#box-up'); 57 var down = $('#box-down'); 58 var window_height = window.innerHeight; 59 60 var up_height = window_height - down.innerHeight(); 61 up.css('height', up_height); 62 63 }, 64 stop: function(e, ui) {} 65 }); 66 }); 67 </script> 68 69</head> 70<body> 71 72<div id="sidebar">Example</div> 73 74<div id="box-up">Example</div> 75 76<div id="box-down">Example</div> 77 78</body> 79</html>
サンプルコードなどがございましたら、お教えいただければと思います。
回答2件
あなたの回答
tips
プレビュー