display:tableを使うのはどうですか?
画像も揃えるのが大変なのでbackground-size:coverを使うといいと思います。background-size:coverの為にli消しました。スライダーとかが入る予定でしたら申し訳ありませんがこの方法は使えません。
HTML
1<html lang="en">
2<head>
3 <link rel="stylesheet" href="style.css">
4</head>
5<body>
6 <div id="menuArea">
7 <div class="menu" id="menu">
8 <a class="home" href="">Home</a>
9 <a class="profile" href="">Profile</a>
10 </div>
11 <div class="imgArea"></div>
12 </div>
13</body>
14</html>
CSS
1body {
2 margin: 0;
3}
4#menuArea{
5 display: table;
6 width: 100%;
7 height: 100%;
8}
9.menu{
10 display: table-cell;
11 background-color: gray;
12 width: 50%;
13}
14.imgArea{
15 display: table-cell;
16 width: 50%;
17 background-image: url(photo.jpg);
18 background-size: cover;
19}
###[追記]カルーセルへの対応
画像の縦横比を保ちながら画像の高さをページに合わせるのはCSSだけでは無理だと思います。とりあえず下記のようなコードを書いておいて縦幅を動的に変更できるカルーセルを導入するといいと思います。カルーセルのコードによってはコードの見直しが必要になるかもしれないので先にカルーセルから導入するといいと思います。
RoyalSliderというスライダーがあるようです。windowのリサイズイベントを受け取ってスライダーサイズをアップデートするという内容です。よく使っているスライダーがありましたら一度このようなリサイズができるかドキュメントを見てみるといいと思います。
http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-stretch-slider-to-full-browser-width-and-height
HTML
1<html lang="en">
2<head>
3 <link rel="stylesheet" href="style.css">
4</head>
5<body>
6 <div id="menuArea">
7 <div class="menu" id="menu">
8 <a class="home" href="">Home</a>
9 <a class="profile" href="">Profile</a>
10 </div>
11 <div class="imgArea">
12 <ul>
13 <li><a href=""><img src="photo.jpg" width="100" height="100"></a></li>
14 </ul>
15 </div>
16 </div>
17</body>
18</html>
CSS
1body {
2 margin: 0;
3}
4#menuArea{
5 display: table;
6 width: 100%;
7 height: 100%;
8}
9.menu{
10 display: table-cell;
11 background-color: gray;
12 width: 50%;
13}
14.imgArea{
15 display: table-cell;
16 width: 50%;
17 background-color: red;
18 overflow: hidden;
19}
20.imgArea ul{
21 width: 100%;
22 list-style-type : none;
23 margin: 0;
24 padding: 0;
25 position: relative;
26}
27.imgArea li{
28 position: absolute;
29 width: 100%;
30}
31.imgArea a{
32 display: block;
33}
34.imgArea img{
35 width: 100%;
36 height: auto;
37}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/12/23 14:12
2017/12/23 15:35