DIV 높이 적응형 전체 화면

1780 단어
//html

    
//css
    html,body { height: 100%; padding: 0; margin: 0; }
    .outer {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        overflow: hidden;
    }
    .A {
        height: 100%;
        background: #BBE8F2;
        width: 50%;
        display: flex;
        flex-direction: column;
    }
    .B {
        height: 100%;  width: 50%;background: #D9C666;
        display: flex;
        flex-direction: column;
    }
    .insertA,.insertB{
        width: 90%;
        margin: auto;
        border: 1px solid;
        height: 30%;
        margin-top: 15px;
    }
    addEventListener("click", function() {
        var el = document.documentElement,
        rfs = el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen 
        ;
        rfs.call(el);
});

좋은 웹페이지 즐겨찾기