CSS Layout - Overflow

-

المقصود Overflow هو عرض المحتويات بشكل يتناسب مع الشاشة في حال كان حجم الشاشة اصغر من المحتويات. بمعني اذا كان لديك div مثلا يحتوي على كميات كبيره من البيانات ومن الصعب عرضها جميعا في شاشة المتصفح، يمكن من خلال CSS التحكم في ذلك وعرض البيانات جميعها بإضافة Overflow  .

طريقة الكتابة.

 overflow: value;
القيمة هنا تكون واحد من :

القيمة 
الوصف
visible

الوضع الافتراضي. حيث لا يتم قص المحتوى ، ويتم عرضه خارج مربع المحتوى

div { overflow: visible; }

Hidden

يتم قطع المحتوى ، ويتم إخفاء المحتوى الزائد ولا يتم عرض اشرطة التمرير 

div { overflow: hidden; }

scroll

يتم قص المحتوى ويتم عرض شريط التمرير الأفقي horizontal والعمودي vertical

div { overflow: scroll; }

auto

هون يقوم المستعرض بالتحكم بذلك حيث يتحكم بالمحتوى في حال كان اكبر من حجم الشاشة ، والذي يمكن أن يختلف من متصفح إلى آخر (ولكن ينتج بشكل عام عن شريط التمرير الأفقي horizontal والعمودي  vertical الذي يتم عرضه على النحو المطلوب)

div { overflow: auto; }

inherit

يتم تطبيق الحالة حسب parent element

div { overflow: inherit; }

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
      div { 
        background: lightyellow; 
        border: 3px solid red; 
        padding: 5px; 
        height: 100px; 
        width: 150px; 
        overflow: auto; 
        }
 </style>
</head>
<body>
<h1>CSS Layout - Overflow </h1>
    <div>
        <p>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
            </p>
        <p>كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.</p>
      </div>
</body>
</html>

شغل الصفحة وشوف النتيجة:
لاحظ ان تم عرض المحتوي خارج div بسبب الامر overflow: visible; 
 
طيب نجرب نغير قيمة overflow الى auto ونشغل الصفحة ونشوف النتيجة:

تم إضافة scroll بشكل تلقائي بناء على الطول والعرض الي تم تحديدهم ل div وحددنا الطول = 100px والعرض =150px 

تمام نجرب نغير قيمة overflow الى scroll ونشغل الصفحة ونشوف النتيجة:
النتيجة في هذه الحالة نفس النتيجة في حال تم استخدام auto لكن الفرق سيتم عرض scroll في جميع الأحوال هنا بغض النضر عن وجود حاجة او لا. 
حتى نفهم الموضوع خلونا نغير الطول والعرض الخاص ب div (الكود:) 
    div { 
        background: lightyellow; 
        border: 3px solid red; 
        padding: 5px; 
        height: 400px; 
        width: 500px; 
        overflow-y: scroll ; 
        }
شغل الصفحة وشوف النتيجة 


النتيجة تم عرض scroll رغم عد الحاجه له. 

الخصائص overflow-x and overflow-y
في هذه الخصائص يتم التحكم بشريط التمرير بشكل افقي او عمودي 
overflow-x : التحكم بشريط التمرير بشكل افقي horizontal 
overflow-y : التحكم بشريط التمرير بشكل عمودي vertical 

طريقة الكتابة.
 
Overflow-x: value;
Overflow-y: value;
القيمة هنا تكون واحد من :

القيمة 
الوصف
visible

الوضع الافتراضي. حيث لا يتم قص المحتوى ، ويتم عرضه خارج مربع المحتوى

div { overflow: visible; }

Hidden

يتم قطع المحتوى ، ويتم إخفاء المحتوى الزائد ولا يتم عرض اشرطة التمرير 

div { overflow: hidden; }

scroll

يتم قص المحتوى ويتم عرض شريط التمرير الأفقي horizontal والعمودي vertical

div { overflow: scroll; }

auto

هون يقوم المستعرض بالتحكم بذلك حيث يتحكم بالمحتوى في حال كان اكبر من حجم الشاشة ، والذي يمكن أن يختلف من متصفح إلى آخر (ولكن ينتج بشكل عام عن شريط التمرير الأفقي horizontal والعمودي  vertical الذي يتم عرضه على النحو المطلوب)

div { overflow: auto; }

inherit

يتم تطبيق الحالة حسب parent element

div { overflow: inherit; }