CSS: Min-Height لا يعمل

StackOverflow https://stackoverflow.com/questions/958888

  •  12-09-2019
  •  | 
  •  

سؤال

كلما أضفت خاصية Min0height إلى Divs لجعلها 100٪، فإنه لا يعمل. لقد أضفتها إلى جميع Divs، بما في ذلك الارتفاع: 100٪؛ وفون ارتفاع: 100٪؛ ولكن لا شيء يعمل. ماذا أفعل لجعله يمتد على طول الطريق؟ يقطع فقط خلفية الشريط الجانبي ولون الخلفية لمنطقة المحتوى.

alt text

(نسيت تسمية جزء. منطقة المحتوى مع الخلفية البيضاء هي .COL1)

CSS:

@charset "UTF-8";
/* CSS Document */

img {
    border-style: none;
    color: #FFF;
    text-align: center;
}
body {
    background-color:#000;
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
}
.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
}
.menu {
    background-image:url(../images/top_menu/background.png);
    background-repeat:repeat-x;
    height:25px;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    top:0px;
    z-index:5;
    background-color:#000;
}
.bottom_menu {
    background-image:url(../images/bottom_menu/background.png);
    background-repeat:repeat-x;
    height:20px;
    z-index:2;
    font: 12px Helvetica, Arial, Sans-Serif;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    bottom:0px;
}
.colmask {
    position:relative;      /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%; /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
}
.sidebar .colright {
    float:left;
    width:200%;
    position:relative;
    left:225px;
    background:#fff;
}
.sidebar .col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:225px;
}
.sidebar .col1 {
    margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
    position:relative;
    right:100%;
    overflow:hidden;
}
.sidebar .col2 {
    float:left;
    width:225px;
    position:fixed;
    top:0px;
    left:0px;
    margin-top:25px;
    margin-left:5px;
    right:225px;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}

لغة البرمجة

<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
    <div class="colright">
      <div class="col1wrap">
            <div class="col1" id="contentDIV">
                Content
            </div>
        </div>
        <div class="col2">
            Sidebar Content
        </div>
    </div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
هل كانت مفيدة؟

المحلول

مثبت. كان الحاوية DIV مباشرة بعد علامة الجسم. حتى مع ارتفاع CSS، فقد أنشأت مشاكل. قمت بإزالةها وتغيير برنامج نصي كان لدي من التقديم في هذا DIV to the document.body وكل شيء يعمل الآن.

نصائح أخرى

إذا كنت تحاول جعل المحتوى الخاص بك وتمتد الشريط الجانبي الطول بأكمله في الصفحة، فلن يساعد أي كمية من إعداد الارتفاع حقا. إذا كنت تستخدم 100٪، فسوف تدفع Fotter من أسفل الصفحة حتى يتعين عليك التمرير لرؤيته. هناك طريقة واحدة أعرفها من شأنها أن تسمح لك بالحصول على هيئة كاملة الارتفاع مع تذييل الصفحة: تذييل لزجة

تحقق من الموقع التالي للحصول على التفاصيل: http://www.cssstickyfooter.com/

خدعة أخرى سوف تحتاجها على الأرجح. من المستحيل أن تحصل على عمودين على قدم المساواة ودعم جميع المتصفحات. أبسط طريقة للحصول على عمودك الرمادي إلى جسم المركزي الأيسر والأبيض لتمتد طوال الطريق إلى تذييل الصفحة هو استخدام صورة هايت 1 بكسل تحتوي على اللون الرمادي والأبيض في النسب الصحيحة، والتي تتكرر بالخلفية على طول ذ محور.

موقع رائع آخر لمعرفة CSS قائمة بصرف النظر.

من الصعب الحصول على تخطيط متسق باستخدام العوامات وتحديد المواقع على نفس العناصر. على وجه الخصوص العائمة والموقف: ثابت (أو مطلق) غير متوافق وكل متصفح يتعامل مع الوضع بشكل مختلف.

لا يدعم IE6 الموقف: ثابت على الإطلاق ويعامله كوضع: ثابت (الافتراضي - لا توجد تحديد المواقع على الإطلاق).

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top