JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="container">
    <div class="block">
        Sayfa yuksekligi : <span id="height1"></span>
        <br>
        Eger sayfa blokHeight + 20px'den kucukse size a surekli: <span id="height1"></span>
        
    </div>
</div>
<div class="footer"></div>

CSS

body,html
{
    margin:0px;
    padding:0px;
    height:100%;
}

.container
{
    background-color:red;
    min-height:100%;
    min-width:100%;
}

.block
{
    text-align:center;
    width:250px;
    height:200px;
    background-color:orange;
    margin:auto;
}
.footer
{
    clear:both;
    height:55px;
    width:100%;
    margin-top:-55px;
    background-color:black;
}

JavaScript

$( document ).ready(function() {
    $("#height1").html($( window ).height());
    if( $( window ).height() <= 270)
       {
           $("body").css('height','260px');
       }
       else
       {
           $("body").css('height','100%');
       }
   
    
});

$(window).on('resize', function(){
       $("#height1").html($( window ).height());
       if( $( window ).height() <= 270)
       {
           $("body").css('height','260px');
       }
       else
       {
           $("body").css('height','100%');
       }
     
});