[jQuery]横並びの要素の高さを揃えたい、何を使えばいい？

html
1<main>article.など</main>
2<dic id="sidebar">post.meta要素</div>

とし、

<main>を左半分に

<#sidebar>を右半分に

高さをいっぱい広げてレイアウトしたいのですが、

jQueryでレイアウトするのが適切だと思います。

widthは%で指定し、<#sidebar>は画面が小さくなると消えるようにします。

jQueryは何を使用すればいいでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

Jquery+Bootstrapで実現する方法をご紹介したいと思います。

まず、BootstrapとJqueryを読み込ませてください。
詳しくはBootstrapのリファレンスを参照いただくとして、以下のコードは
mainのcol-xs-12 col-sm-6にて、画面幅768px未満のときに全面表示、768px以上で画面の左半分に表示とし、
#sidebarのhidden-xs col-sm-6にて、画面幅768px未満のときに非表示、768px以上で画面の右半分に表示とする例です。

<style type="text/css">
html,body,.row{height:100%;}
main{
height:100%;
background-color:red;
}
#sidebar{
height:100%;
background-color:blue;
}
</style>
</head>
<body>
<div class="row">
<main class="col-xs-12 col-sm-6">article.など</main>
<div class="hidden-xs col-sm-6" id="sidebar">post.meta要素</div>
</div>
</body>

投稿2015/12/03 04:36

編集2015/12/03 04:59

Cafelike

総合スコア89

makoto-n

2015/12/05 00:45

初めてBootstrap使用しました。こんな指定で出来るのですね、ありがとうございます。

行動規範の内容に同意します

CSSだけでもこんな感じのことができます。

CSS
1html{
2  height:100%;
3}
4main, div{
5  border:1px solid;
6}
7body{
8  display:flex;
9  height:100%;
10}
11main{
12  width:80%;
13  height:100%
14}
15div{
16  width:20%;
17  height:100%
18}
19@media screen and (max-width: 600px) {
20  body{
21    display:flex;
22    flex-direction: column;
23  }
24  main{
25    width:100%;
26    height:80%
27  }
28  div{
29    width:100%;
30    height:20%
31  }
32}