file browser

js/q06fixed.php

<html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>     
<script src="jquery-3.3.1/jquery.js"></script>
<script type="text/javascript">
$().ready(function () {
    info();
    $(window).resize(info);
    });

let infoCnt = 0;
function info() { 
//    $(document.documentElement).width('100vw');    
//    $(document.documentElement).css('overflow' , 'auto');    

    t = '<li>info#' + ++infoCnt + '</li>';

   $([window, 'html', 'body', 'mid', '#u1']).each(function(i, e) {
        let x,y,z;
        t += '<li> ' + i + ' e=' + e + ' =' + e.name + ' n=' + $(e).prop('nodeName')+ " id=" + $(e).attr('id'); 
        t += '</li>';
        $('#u1').html(t);
    });
    $('#u1').html(t);
}
 /*      let t = $(e).text();
       t = (x = t.indexOf(':')) < 0 ? t + ':' : t.substring(0, x+1);
       if (i == 0)
           t += ' infoCnt=' + infoCnt;
       let f = t == 'for #g0:' ? '#g0' : t == 'for body:' ? $('body') : t == 'for html:' ? $('html') : t == 'for document:' ? document : t == 'for window:' ? window: t == 'for window.top:' ? window.top: e
       t += ' ' + Math.round($(f).width()) + 'x' + Math.round($(f).height()); 
       $(e).text(t);
       try {
            t += '@' + Math.round((x = $(f).offset()).left) + ',' + Math.round(x.top);
       } catch (err) {
            t += '[@offset ' + err + ']';
       }
       $(e).text(t);
       t += ' scroll=' + Math.round($(f).scrollLeft()) + ',' + Math.round($(f).scrollTop());
       $(e).text(t);

        $('#uW').html('<li> window.inner ' + Math.round(window.innerWidth) + 'x' + Math.round(window.innerHeight) + '</li>'
            + '<li> window.      ' + Math.round(window.width) + 'x' + Math.round(window.height) + '</li>'
            + '<li> window.outer ' + Math.round(window.outerWidth) + 'x' + Math.round(window.outerHeight) + '</li>'
    //        + '<li> window.client ' + Math.round(window.clientWidth) + 'x' + Math.round(window.clientHeight) + '</li>'
            + '<li> $(window).inner ' + Math.round($(window).innerWidth()) + 'x' + Math.round($(window).innerHeight()) + '</li>'
            + '<li> $(window).      ' + Math.round($(window).width()) + 'x' + Math.round($(window).height()) + '</li>'
            + '<li> $(window).outer ' + Math.round($(window).outerWidth()) + 'x' + Math.round($(window).outerHeight()) + '</li>'
    //        + '<li> $(window).client ' + Math.round($(window).clientWidth()) + 'x' + Math.round($(window).clientHeight()) + '</li>'
        );
    }); 
} */
</script>
 

<title>fixed layout</title>
</head>
<body class="fBody">
<img src="corner50.jpg" class="corner leftTop"/>
<img src="corner50.jpg" class="corner leftBottom"/>
<img src="corner50.jpg" class="corner rightTop"/>
<img src="corner50.jpg" class="corner rightBottom"/>
<mid class="fMid">
<h1> fixed layout </h1>
<ul id="u1"></ul>
<h1> window </h1>
<ul id="uW"> </ul>
<h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
</mid>
 </body>
<style type="text/css">
.fBody {
    position: fixed;
    margin: 0;
    max-width:  100vw;
    min-width:  100vw;
    max-height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: #ffd0ff;
}
.fBod2 {
    width:  100%;
    height: 100%;

    background:  url("corner50.jpg") left top no-repeat,
        url("corner50.jpg") left  bottom no-repeat,
        url("corner50.jpg") right    top no-repeat,
        #ffc0ff url("corner50.jpg") bottom right no-repeat;

}
.corner {
    display: block;
    width:  50px;
    height: 50px;
    z-index: 9;
/*    background-image: url("corner50.jpg"); */
}
.leftTop {
    position: absolute;
    left: 0;
    top: 0;
}
.leftBottom {
    position: absolute;
    left: 0;
    bottom: 0;
}
.rightTop {
    position: absolute;
    right: 0;
    top: 0;
}
.rightBottom {
    position: absolute;
    right: 0;
    bottom: 0;
}
.fMid {
    display: block;
    position: relative;
    top: 50px;
    height: calc(100vh - 100px); 
/*    bottom: 50px; */
    overflow: auto;
}
             /* Kommentare in css mit ungeschachtelten slash star nicht <!-- .... */
    p        /* selector = p */
    {        /* attribut Liste */
    color:red;
    text-align:center;
    } 
    aa {color:green; text-align:left;}
    bb {color:blue;}
    #id1 {color:pink; background-color:yellow;}
    .cl2 {color:white; background-color:black;}
</style>

</html>