كيف يمكنني القوة DIV كتلة تمتد إلى أسفل الصفحة حتى إذا كان لديه أي مضمون ؟

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

  •  02-07-2019
  •  | 
  •  

سؤال

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

هنا هو بلدي HTML:

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

و CSS:

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
هل كانت مفيدة؟

المحلول

المشكلة ليست أن شعبة ليس في 100% الطول ، ولكن أن الحاوية حول الأمر ليس كذلك.وهذا سوف يساعد في المتصفح وأظن تستخدمه:

html,body { height:100%; }

قد تحتاج إلى ضبط الحشو هوامش كذلك, ولكن هذا سوف تحصل على 90% من الطريق إلى هناك.إذا كنت بحاجة لجعله يعمل مع جميع المتصفحات سوف تضطر إلى العبث بها قليلا.

هذا الموقع لديه بعض الأمثلة الممتازة:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

وأوصى أيضا الذهاب إلى http://quirksmode.org/

نصائح أخرى

سأحاول الإجابة على السؤال مباشرة في العنوان بدلا من كونها مصرة على التمسك تذييل الصفحة إلى أسفل الصفحة.

جعل div تمتد إلى أسفل الصفحة إذا لم يكن هناك ما يكفي من المحتوى لملء المتاحة العمودي المعاينة المتصفح:

التجريبي في (قم بسحب الإطار التعامل معها لمعرفة تأثير) : http://jsfiddle.net/NN7ky
(رأسا على عقب:نظيفة وبسيطة.الجانب السلبي:يتطلب flexbox - http://caniuse.com/flexbox)

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - أو أنا نعسان جدا

محاولة اللعب مع حولها التالية css rule:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

تغيير ارتفاع لتتناسب مع الصفحة الخاصة بك.ارتفاع ذكر مرتين عبر متصفح التوافق.

يمكنك نوعا ما المأجور مع مين الطول إعلان

<div style="min-height: 100%">stuff</div>

حاول ريان الأمر الواقع "في تذييل لزجة" حل ،

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

يعمل في IE, فايرفوكس, كروم, سفاري و من المفترض الأوبرا أيضا ، ولكن لم تختبر ذلك.هو حل كبير.من السهل جدا وموثوق بها لتنفيذها.

Min-height الخاصية غير مدعومة من قبل جميع المتصفحات.إذا كنت بحاجة إلى #محتوى لتمديد انها الارتفاع على صفحات أطول ارتفاع العقار سوف يقطعها.

انها قليلا من الإختراق ولكن هل يمكن إضافة شعبة فارغة مع عرض 1px وارتفاع مثلا1000px داخل #محتوى div.أن قوة المحتوى أن يكون على الأقل 1000px عالية و لا تزال تسمح يعد المحتوى لتمديد الارتفاع عند الحاجة

في حين أنها ليست أنيقة مثل CSS نقية, صغيرة قليلا من جافا سكريبت يمكن أن تساعد في تحقيق هذا:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>

محاولة:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

لم تختبر حتى الآن...

تذييل لزجة مع ارتفاع ثابت:

HTML مخطط:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}

أعتقد أن مسألة أن تكون ثابتة فقط مما يجعل html ملء 100% أيضا ، قد يكون الجسم يملأ 100% html ولكن html لا شغل 100% من الشاشة.

حاول مع: 

html, body {
      height: 100%;
}

محاولة http://mystrd.at/modern-clean-css-sticky-footer/

الرابط أعلاه هو أسفل ، ولكن هذا الرابط https://stackoverflow.com/a/18066619/1944643 هو موافق.:D

Demo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>

أيضا قد مثل هذا: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

ليس تماما ما طلبته ، ولكن يمكن أن تناسب احتياجاتك.

أنا لا أميل لها رمز ، ولكن أنا أعلم أنني فعلت هذا مرة واحدة باستخدام مزيج من ارتفاع:1000px و هامش القاع:-1000px;في محاولة ذلك.

اعتمادا على كيفية تخطيط الأعمال ، قد تحصل بعيدا مع وضع خلفية على <html> العنصر الذي هو دائما على الأقل ارتفاع العرض.

فإنه ليس من الممكن تحقيق ذلك فقط باستخدام الأنماط (CSS).بعض المتصفحات لا تقبل

height: 100%;

كما أعلى قيمة من وجهة نظر من نافذة المتصفح.

جافا سكريبت هي أسهل عبر متصفح حل ، وإن كان كما ذكر ، غير نظيفة أو واحدة جميلة.

يمكنك استخدام "vh" طول وحدة min-height المنشأة من العنصر نفسه و والديه.انها دعمت منذ IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}

لا أفضل ولا أفضل تنفيذ أكبر المعايير ، ولكن يمكنك تغيير DIV لفترة زمنية...إنه لا يوصي إلا الإصلاح السريع =P =)

أعرف أن هذه ليست أفضل طريقة لكن لم أستطع معرفة ذلك دون العبث بلدي رأس القائمة ، وما إلى ذلك من المواقف.لذا....أنا استخدم الجدول هذين وcolums.كان حل سريع.لا JS الحاجة؛)

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