در طراحی صفحات وب سایت ها در بسیاری از موارد پیش می آید که می خواهیم ارتفاع صفحه بدون اینکه محتویات آن از کادر خارج شوند به صورت خودکار تغییر پیدا کند.

یک راه آسان برای این کار استفاده از overflow در نوشتن استایل برای صفحه و یا div مورد نظر است .

به طور کلی چند مقدار را میتوانیم برای overflow در نظر بگیریم :

1- Auto

با قرار دادن این مقدار ابعاد کادر مورد نظربه صورت خودکار با توجه به محتویات آن کم یا زیاد می شود .

2- Visible

با قرار دادن این مقدار همه محتویاتی که طول وعرض بیشتر داشته باشند نمایش داده می شوند .

3- Hidden

این مقدار باعث خواهد شد تا محتویات با طول و عرض بیشتر نمایش داده نشوند .

4- Scroll

این مقدار باعث خواهد شد تا در صورتی که محتویات اندازهای بیش از طول و عرض لازم داشته باشند با استفاده از اسکرول بار قابل مشاهده باشند .

مثال:

در تصویر می بینید که محتویات از کادر خارج شده است . استایل نوشته شده برای تگ div مورد نظر به صورت زیر است:

1   div {

2   width: 200px;

3   height: 200px;

4   border: 1px  solid  #000 ;

5    }

برای برطرف کردن این مشکل بهتر است که استایل ها بدین صورت تغییر کنند :

1   div {

2   width : auto;

3   height : auto;

4   border : 1px  solid  #000 ;

5    overflow : auto;

6   }

امیدوارم که این نوشته مورد استفاده قرار گیرد .