愚者の経験

「また今度」はほとんどこない

月別アーカイブ: 3月 2016

[CSS]ボックスの高さをページにあわせるには?

よくhtmlとbodyにheight:100%;つけて、中のボックスにmin-height:100%;をつければ~的なのがあるんですが
height:100%;ボックスの上下に別の高さを持つ要素があれば、その分の高さ+ページの高さになってしまいます…(´・ω・`)

height:100%;は親要素の高さをそのまま持つという意味ですから当たり前なのですがどちらかと言うと
「(途中から始まったとしても)画面下まで一杯の高さを持ちたい」という要望が多いと思うのです。

これをする場合はまず親要素(bodyとかのページそのものの高さを持つもの)にposition:absolute;
途中に囲むdivなどにはheight:100%;だけを指定して、下まで伸ばすボックス要素にposition:absolute;を追加、
座標起点がページ左上になるのでボックスの上にある要素の高さXXを合計してborder-top:XX solid #fff;box-sizing:border-box;height:100%;
で、下まで伸ばすためにbottom:0;を利用する

でごり押してるんですがもっといい方法ありませんかね?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ハイト100%</title>
        <style type="text/css">
            html{height: 100%;}
            body{height: 100%;margin: 0;position: absolute;}
            #main{height: 100%;width: 800px;position: absolute;}
            #main>#tab {height: 100%;box-sizing: border-box;border-top: 70px #fff solid;}
            
            header{margin: 10px;height: 50px;position: absolute;}
            .tabradio{display: none;}
            #contents{width: 800px;display: table;height:100%;}
                        
            #sono1lbl{background: #ffbf7f;}
            #sono1_cont{border-color: #ffbf7f;}
            #sono2lbl{background: #ffff7f;}
            #sono2_cont{border-color: #ffff7f;}
            #sono3lbl{background: #7fff7f;}
            #sono3_cont{border-color: #7fff7f;}
            #sono4lbl{background: #7fbfff;}
            #sono4_cont{border-color: #7fbfff;}
            #sono5lbl{background: #ff7fff;}
            #sono5_cont{border-color: #ff7fff;}
                        
            .tabpage{display: none;position:absolute;top: 150px;left:0;bottom: 0;right: 0;width: 120%;box-sizing:border-box;border-width: 3px;border-style:solid;font-size: 20px;}
            #sono1:checked+#sono1_cont{display:block;}
            #sono2:checked+#sono2_cont{display:block;}
            #sono3:checked+#sono3_cont{display:block;}
            #sono4:checked+#sono4_cont{display:block;}
            #sono5:checked+#sono5_cont{display:block;}
            
            #tab{width: 100%;font-size:0;height:100%;}
            .tabindex{display:inline-block;font-size:20px; width: 20%;height: 80px;text-align: center;border:#a5a5a5 1px solid;box-sizing:border-box;padding-top:25px;}
        </style>
    </head>
    <body>
        <div id="main">
            <header>
                <h1>ハイト100%テスト</h1>
            </header>
            <div id="tab">
                <label id="sono1lbl" for="sono1" class="tabindex">その1</label>
                <input id="sono1" type="radio" name="nav" class="tabradio" checked>
                <div id="sono1_cont" class="tabpage">その1</div>
                <label id="sono2lbl" for="sono2" class="tabindex">その2</label>
                <input id="sono2" type="radio" name="nav" class="tabradio">
                <div id="sono2_cont" class="tabpage">その2</div>
                <label id="sono3lbl" for="sono3" class="tabindex">その3</label>
                <input id="sono3" type="radio" name="nav" class="tabradio">
                <div id="sono3_cont" class="tabpage">その3</div>
                <label id="sono4lbl" for="sono4" class="tabindex">その4</label>
                <input id="sono4" type="radio" name="nav" class="tabradio">
                <div id="sono4_cont" class="tabpage">その4</div>
                <label id="sono5lbl" for="sono5" class="tabindex">その5</label>
                <input id="sono5" type="radio" name="nav" class="tabradio">
                <div id="sono5_cont" class="tabpage">その5</div>
             </div>
        </div>
    </body>
</html>
広告

半年振り…node.js少し始めました

最近Access関係で書くことなかったので放置気味でしたが、訳あってAndroidタブレットでアプリを作ろうと思いたち自分のネイティブアプリを作る知識は皆無なので比較的知識のあるwebでやってみることになりました。

しばらく自分の備忘録としてこのネタでブログを書いていきますのでよろしくお願いします。