質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2275閲覧

jQuery UIで上下のdiv要素をあわせて100%を維持したい

TJMYK

総合スコア82

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/22 16:17

編集2016/12/23 03:24

#実施したいこと
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>

サンプルコードなどがございましたら、お教えいただければと思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naomi3

2016/12/22 23:08

全然動かないのでHTMLを付けてください。
TJMYK

2016/12/23 03:25

HTMLを追加させていただきました。お手数ですがご確認とご指導をお願い申し上げます。
guest

回答2

0

自己解決

JavaScript

1 <script> 2 $(function() { 3 $('#box-down') 4 .resizable({ 5 handles:'n', 6 start: function(e, ui) {}, 7 resize: function(e, ui) { 8 9 var up = $('#box-up'); 10 var down = $('#box-down'); 11 var window_height = window.innerHeight; 12 13 var up_height = window_height - down.innerHeight(); 14 up.css('height', up_height); 15 down.css('top', 0); // 追加 16 17 }, 18 stop: function(e, ui) {} 19 }); 20 }); 21 </script>

Chromeのデベロッパーツールで注意深く観察していたところ、topが変更されていることがわかりました。

down.css('top', 0);

上記を追加することで、解決致しました。

投稿2016/12/23 03:33

TJMYK

総合スコア82

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

絶対にScript使わないといけないのでしょうか?

HTML

1<div id="wrapper"> 2 <div id="side">Side</div> 3 <div id="top">Top</div> 4 <div id="bottom">Bottom</div> 5</div>

CSS

1#wrapper { 2 width:100vw; 3 height:100vh; 4} 5#side { 6 float:left; 7 width:20vw; 8 height:100vh; 9 background-color:#666; 10} 11#top { 12 float:left; 13 width:80vw; 14 height:80vh; 15 background-color:#999; 16} 17#bottom { 18 float:left; 19 width:80vw; 20 height:20vh; 21 background-color:#ccc; 22}

比率を合わせ続けるだけなら、上記で可能だと思うのですが…

投稿2016/12/22 22:38

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

LibertyBell3

2016/12/22 23:02

あああああ、勘違い(笑)。すみません。 でも、100vhを使えば何とかなりそうですけど、私は疎いので、これにて失礼いたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問