تقسيم الصفحة لجزئين، علوي وسفلي بالتساوي

إعداد وتنفيذ محمد الحلبي TRAIDNT.NET

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="top"></div>
<div id="bottom"></div>

CSS

*{
    padding: 0;
    margin: 0;
}
#top{
    background-color: #cbcbcb
}
#bottom{
    background-color: #848484
}

JavaScript

$(function(){

    var windowHeight = $(window).height(); // تحديد ارتفاع المتصفح
    
    $('#top').height(windowHeight / 2); //إعطاء العنصر نصف ارتفاع المتصفح
    $('#bottom').height(windowHeight / 2); //إعطاء العنصر نصف ارتفاع المتصفح
    
    
    $(window).resize(function(){
        
        var windowHeight = $(window).height(); // تحديد ارتفاع المتصفح
        
        $('#top').height(windowHeight / 1); //إعطاء العنصر نصف ارتفاع المتصفح
        $('#bottom').height(windowHeight / 3); //إعطاء العنصر نصف ارتفاع المتصفح
        
    });
    
});