جعل محتوى HTML توسيع لملء النافذة

Question

لدي صفحة HTML مقسمة رأسيا إلى

• رأس
• الجسم
• تذييل

الجسم بدوره ينقسم أفقيا إلى

• حمس كبير على اليسار محاطة بمرض التمرير، وعرض جزء من الرسم البياني
• نموذج على اليمين

الرأس والتذييل هو ارتفاع ثابت. يجب أن يتوسع الجسم عموديا لملء جزء النافذة الذي لم يشغله الرأس والتذييل.

وبالمثل، يكون النموذج عرضا ثابتا وعلى جزء التمرير يتوسع أفقيا لملء عرض النافذة.

الرسم البياني كبير جدا (حتى 10x10 Screenfuls) لذلك لا يمكنني عرض كل ذلك. بدلا من ذلك، أريد عرض أكبر قدر ممكن (باستخدام النافذة بأكملها) بحيث يحتاج المستخدم إلى التمرير بأقل قدر ممكن.

لا يمكنني أيضا استخدام JavaScript، لأن بعض المستخدمين باركان بالضرورة ويجب عليك تعطيلها.

بعض الخيارات التي نظرت فيها:

• طاولة مع عرض خلايا التمرير وعرض الارتفاع إلى 100٪ وجميع الآخرين إلى 1٪
  لا يعمل. يتوسع الجدول (وبالتالي الصفحة) على أنه يحتوي على المخطط بأكمله، حتى مع تحديد المواقع المطلقة على لوحة التمرير DIV.
• تحديد المواقع المطلقة لتعويض الجزء من أسفل الصفحة عن ارتفاع تذييل الصفحة
  يعمل ولكن غير دقيق: يعتمد ارتفاع تذييل الصفحة على حجم الخط الحالي وما إذا كان النص ملفوفا. هذا يعني أنني يجب أن أترك هامش كبير لضمان عدم التداخل.
• ضع المخطط في IFRAME
  أفضل الحلول التي وجدت معها مع تعطيل البرامج النصية، ولكنها تحد ما يمكنني القيام به في البرامج النصية عندما يكونون نكون ممكن.

لاحظت أن خرائط Google تستخدم منطقة ثابتة الحجم على الخريطة عند تعطيل البرامج النصية. إذا قمت بتخفيض Google في هذه المشكلة، فهل هذا يعني أنه غير ممكن؟

Answer 1

باستخدام الارتفاع: سمة CSS 100٪ يجب أن تجعلها تعمل.

معرفة إذا ديف وودز تخطيط ارتفاع 100٪ باستخدام CSS يعمل من اجلك.

Answer 2

إنه جانب معروف من position: absolute; خاصية CSS التي ستمنحك التخطيط الذي تبحث عنه. يمكنك وضع عنصر تماما في جميع الاتجاهات الأربعة، أعلى، يمين، أسفل وليسار. هذا يعني أن مربع يمكن أن يكون السوائل مثل المتصفح وتبقى دائما نفس المسافة بعيدا عن حواف حاوية تكنولوجيا المعلومات التي تحددها.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

مثال على ذلك http://www.sanchothefat.com/dev/layouts/cssframes.html. ثم عرض المصدر وسحب CSS لمعرفة كيف يتم ذلك في مثال أكثر تعقيدا.

إذا كنت تأخذ هذا النهج، فعليك وضع جميع الحاوية الرئيسية تماما <div>س. استخدم EMS إذا كان حجم الخط مصدر قلق.

ملاحظة. هناك Gotcha في أن IE6 يفسد (صدمة!) ومع ذلك فإن المثال الذي قدمته يحتوي على تراجع IE6. فقط ارتفاع ثابت سيكون على ما يرام.