

タイトルの通りですが、縦は上手く行くのですが横が上手く行きません(横が画面よりはみ出てしまいます)。  
何か良い表示方法はありますでしょうか？  
お詳しい方いらっしゃいましたらお願いします。

[code]

        #img {
            width: 100%;
            height: 33%;
     }
    
        #img2 {
            width: 100%;
            height: 34%;
     }
        
        #img3 {
            width: 100%;
            height: 33%;
     }
[/code]

[code]

        <div id="img">
            <a href="index.html"><img src="img/image_home_01.jpg"></a>
        </div>
        <div id="img2">
            <a href="index.html"><img src="img/image_home_02.jpg"></a>
        </div>
        <div id="img3">
            <a href="index.html"><img src="img/image_home_03.jpg"></a>
        </div>
[/code]


CC BY-SA 4.0
2015-01-26T03:27:52.637
5295
2019-07-10T07:52:57.160
2019-07-10T07:52:57.160
32986
7724
question
html5 monaca
画面を画像で3分割し、それぞれにリンクから別画面に移動


以下、縦三分割（実質五分割）のサンプルです。

## 1. flexbox を利用した縦分割レイアウト

[code]

    body {
        margin: 0;
        padding: 0;
    }
    .screen {
        display: flex;
        flex-direction: column;
        position: absolute;
        height: 100%;
        width: 100%;
        overflow:hidden;
    }
    .tabbar, .middle, .upper, .lower, .toolbar {
        width: 100%;
        overflow-y:scroll;
        overflow-x:hidden;
    }
    .toolbar, .tabbar {
        height: 24px;
        background-color: cyan;
        overflow-y:hidden;
    }
    .upper {
        flex: 1;
        background-color: pink;
    }
    .middle {
        flex: 1;
        background-color: lightgray;
    }
    .lower {
        flex: 1;
        background-color: lightblue;
    }
[/code]

[code]

    <div class="screen">
    <div class="tabbar">tabbar</div>
    <div class="upper">
        <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" /><br/>
        <p>1
            <br/>1
            <br/>1
            <br/>1
            <br/>1
            <br/>1</p>
    </div>
    <div class="middle">
        <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
        <p>2
            <br/>2
            <br/>2
            <br/>2
            <br/>2
            <br/>2
            <br/>2
            <br/>2</p>
    </div>
    <div class="lower">
        <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
        <p>3
            <br/>3
            <br/>3
            <br/>3
            <br/>3
            <br/>3
            <br/>3</p>
        </div>
    <div class="toolbar">toolbar</div>
    </div>
[/code]

## 2. `position: absolute` での縦分割レイアウト

(以下のは古いやり方です。）

[code]

    .middle, .upper, .lower {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        overflow-y:scroll;
        overflow-x:hidden;
    }
    .upper {
        top: 0;
        height: 33%;
        background-color: pink;
    }
    .middle {
        top: 33%;
        height: 34%;
        background-color: lightgray;
    }
    .lower {
        bottom: 0;
        height: 33%;
        background-color: lightblue;
    }
[/code]

[code]

    <div class="vsplits">
    <div class="upper">
        <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
        <p>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1</p>
    </div>
    <div class="middle">
        <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
        <p>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2</p>
    </div>
    <div class="lower">
        <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
        <p>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3</p>
    </div>
    </div>
[/code]


CC BY-SA 3.0
2015-01-26T06:46:12.333
5311
2015-01-26T07:36:59.630
2015-01-26T07:36:59.630
4978
4978
5295
answer

[code]

    #img {
        width: 100%;
        height: 33%;
    }
    
    #img img {
        width: 100%;
    }
    
    #img2 {
        width: 100%;
        height: 34%;
    }
    
    #img2 img {
        width: 100%;
    }
    
    #img3 {
        width: 100%;
        height: 33%;
    }
    
    #img3 img {
        width: 100%;
    }
    
[/code]

これで治ると思います。  
img要素にwidth値が指定されていないので、divの１００％を無視して画像そのままのpxで表示されてしまいす。  
親要素としてdiv要素を付けると、もっと綺麗にCSSを縮小できます。  
求めている結果と違いましたら申し訳ございません。


CC BY-SA 3.0
2015-01-29T05:29:46.323
5556
2015-01-29T05:42:28.333
2015-01-29T05:42:28.333
7887
7887
5295
answer