मैं DIV ब्लॉक को किसी पृष्ठ के नीचे तक विस्तारित करने के लिए कैसे बाध्य करूं, भले ही उसमें कोई सामग्री न हो?

190

नीचे दिखाए गए मार्कअप में, मैं सामग्री 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>

और मेरा सीएसएस :

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;
}

css html border

— विंस पानुकियो
स्रोत

आप क्या करना चाहते हैं यदि अधिक सामग्री है तो पृष्ठ पर फिट हो सकता है? आपको किन ब्राउज़रों की परवाह है?

— drs9222

117

आपकी समस्या यह नहीं है कि div 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/ पर भी जाने की सलाह देता हूं

— जेसन हर्नांडेज़
स्रोत

46

यह समाधान स्क्रॉल करने वाले पृष्ठों के अनुकूल नहीं है।

— jbranchaud

3

CSS में min-height property उसे मदद करनी चाहिए ... मुझे लगता है

— Alfabravo

1

दिलचस्प रूप से इसने मेरी स्क्रॉलिंग समस्याओं को हल कर दिया, क्योंकि उनके कारण

— एलन मैकडोनाल्ड

यह क्रोम के नवीनतम संस्करण में मेरे लिए काम नहीं करता है।

— हैलोवर्ल्डनमोर

48

मैं सीधे शीर्षक में सवाल का जवाब देने की कोशिश करूँगा, बजाय पेज के नीचे एक पाद लेख को चिपकाने पर नरक-तुला होने के बजाय।

यदि उपलब्ध वर्टिकल ब्राउज़र व्यूपोर्ट को भरने के लिए पर्याप्त सामग्री नहीं है तो पृष्ठ के निचले भाग पर div विस्तार करें:

डेमो (प्रभाव को देखने के लिए फ्रेम हैंडल को खींचें): http://jsfiddle.net/NN7ky
(उल्टा: साफ, सरल। नकारात्मक पक्ष: फ्लेक्सबॉक्स की आवश्यकता है - 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>

सीएसएस:

* { 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;
}

ता-दा - या मैं बहुत ज्यादा नींद में हूं

— Gima
स्रोत

14

हममें से कुछ भाग्यशाली हैं जो केवल "आधुनिक" ब्राउज़रों का समर्थन करते हैं, इसलिए यह मेरे लिए अविश्वसनीय रूप से उपयोगी था। धन्यवाद गीमा। मैंने कुछ ऐसा करने के कई तरीके आजमाए लेकिन यह हमेशा विभिन्न सूक्ष्म तरीकों से टूट गया। यह काफी बेहतर है। अभी भी बिल्कुल समझ में नहीं आता है कि यह इस तरह से क्यों काम करता है।

— क्रिस निकोला

1

Flexbox तत्व इसे तत्वों के बीच सामग्री क्षेत्र में विभाजित करने का प्रयास करता है। मैं 1) द्वारा काम की पेशकश समाधान divs के सिकुड़ने से इनकार करते हैं, और 2) .div2 के बढ़ने में सक्षम। इसलिए divs अपनी सामग्री को छिपाने के लिए सिकुड़ते नहीं हैं, और केवल .div2 का विस्तार करने की अनुमति है।

— गीमा

तो यह फ़ायरफ़ॉक्स में मुझे होने वाली समस्या को ठीक करता है, जहां सामग्री अभी भी ब्राउज़र के लिए बहुत बड़ी थी। दुर्भाग्य से, क्रोम में, यह अकेले उस समस्या को ठीक नहीं करता है। हालाँकि, मार्जिन भी सेट करता है और 0 पर पेडिंग करता है।

— माइकल शेपर

यह सही उत्तर है, न्यूनतम ऊंचाई: 100% केवल तभी काम करता है जब मूल कंटेनर में अधिक कुछ नहीं होता है, और कैल्क वास्तव में मदद नहीं करता है यदि ऊपर विस्तार तत्व से ऊपर वाले भाई को अज्ञात ऊंचाई है

— zakius

इस मुद्दे से घंटों जूझने के बाद, यह एकमात्र समाधान है जिसने वास्तव में मेरे लिए इसे तय किया है। केवल एक हिस्सा क्या करता है की एक छोटी सी व्याख्या याद आ रही है। लेकिन वैसे भी, बहुत बहुत शुक्रिया @Gima।

— पाइलंड

18

निम्नलिखित सीएसएस नियम के साथ खेलने की कोशिश करें:

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

अपने पृष्ठ के अनुरूप ऊंचाई बदलें। क्रॉस ब्राउज़र संगतता के लिए ऊंचाई का दो बार उल्लेख किया गया है।

— केविन पढ़ें
स्रोत

यह काम करता है, लेकिन मैंने पाया कि अगर मैं न्यूनतम ऊंचाई 600px से अधिक बढ़ाता हूं, तो यह एक स्क्रॉल बनाता है। क्या आपको पता होगा कि ऐसा क्यों हो रहा है?

— सिद्धार्थ पटेल

1

@SiddharthPatel क्योंकि #content div अपने पैरेंट को ओवरफ्लो कर रही है। इसलिए #content div के पैरेंट को ओवरफ्लो करने के लिए सेट करें: ऑटो या ओवरफ्लो: हिडन css वैल्यू और इसे स्क्रॉल की बजाय फिट करने के लिए / ओवरफ्लो का विस्तार करना चाहिए। शायद ऐसे सवालों को टिप्पणी के बजाय अगली बार नए सवालों के रूप में पेश करना बेहतर होगा :)

— कोल्ट मैककॉर्मैक

प्रत्येक उत्तर की विधि का प्रयास करने के बाद, यह एकमात्र ऐसा काम है। यहां तक कि यह पूरी तरह से काम करता है, क्योंकि मुझे पृष्ठ की ऊंचाई से मेल खाने के लिए ऊंचाई मूल्य को समायोजित करना पड़ता है, इसलिए इसे ट्विकिंग लेता है। हालाँकि, यह सभी ब्राउज़रों के लिए समान रूप से काम करता है।

— ताराकुस

इस उत्तर के लिए बहुत बहुत धन्यवाद। यह बस है और कई प्लेटफार्मों पर अच्छी तरह से काम करता है। मैंने वास्तव में लगभग 1 वर्ष पहले यह महसूस किया था कि काश मैं दो बार उत्थान कर पाता।

— vedi0boy

6

आप थोड़े मिनट की घोषणा के साथ इसे हैक कर सकते हैं

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

— ओवेन
स्रोत

4

रयान एफिट के "स्टिकी फूटर" समाधान की कोशिश करें,

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

IE, फ़ायरफ़ॉक्स, क्रोम, सफारी और माना ओपेरा भी काम करता है, लेकिन यह परीक्षण नहीं किया है। यह एक महान समाधान है। लागू करने के लिए बहुत आसान और विश्वसनीय।

— Anjisan
स्रोत

7

लिंक नीचे! लिंक नीचे!

— कोडेमिरर

3

यहाँ हमारे गिरे हुए 🍻

— अब्राहम ब्रूक्स

1

लिंक

— c24w

3

न्यूनतम ऊंचाई वाली संपत्ति सभी ब्राउज़रों द्वारा समर्थित नहीं है। यदि आपको अपने #content की जरूरत है तो इसे लंबा करने के लिए ऊँचाई वाले पृष्ठों पर ऊँचाई की संपत्ति कम हो जाएगी।

यह एक हैक की एक बिट है, लेकिन आप अपने # कॉन्टेंट डिव के अंदर 1px की चौड़ाई और जैसे 1000px की ऊंचाई के साथ एक खाली div जोड़ सकते हैं। यह सामग्री को कम से कम 1000px ऊंचा होने के लिए मजबूर करेगा और तब भी जब जरूरत हो तब ऊंचाई बढ़ाने के लिए लंबे समय तक सामग्री की अनुमति देगा

— जीन
स्रोत

3

हालांकि यह शुद्ध सीएसएस की तरह सुरुचिपूर्ण नहीं है, जावास्क्रिप्ट का एक छोटा सा हिस्सा इसे पूरा करने में मदद कर सकता है:

<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>

— एडम फ्रेंको
स्रोत

3

प्रयत्न:

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

अभी तक इसका परीक्षण नहीं हुआ है ...

— Steph
स्रोत

3

स्थिर ऊंचाई के साथ चिपचिपा पाद लेख:

HTML योजना:

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

सीएसएस:

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

— डेविड होराक
स्रोत

2

Http://mystrd.at/modern-clean-css-sticky-footer/ आज़माएं

ऊपर लिंक नीचे है, लेकिन यह लिंक https://stackoverflow.com/a/18066619/1944643 ठीक है। : डी

डेमो:

<!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>

— विनीसियस जोस लटोरे
स्रोत

1

@codemirror धन्यवाद, मैंने अभी एक और कड़ी के साथ टिप्पणी संपादित की है जो काम कर रही है।

— विनीसियस जोस लेटर्रे

1

आप तत्व और स्वयं के माता-पिता की संपत्ति की ऊंचाई के लिए "vh" लंबाई इकाई का उपयोग कर सकते हैं। यह 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>

सीएसएस:

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

— निको
स्रोत

यह केवल व्यूपोर्ट की ऊंचाई तक div को फैलाता है, पेज को ही नहीं।

— jansmolders86

1

मुझे लगता है कि इस मुद्दे को तय करना होगा कि html केवल 100% भरता है, हो सकता है कि शरीर 100% html को भर दे, लेकिन html 100% स्क्रीन को नहीं भरता है।

इसके साथ प्रयास करें:

html, body {
      height: 100%;
}

— डेविड मारसेल
स्रोत

0

इसके अलावा आप इसे पसंद कर सकते हैं: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

यह काफी नहीं है कि आपने क्या मांगा, लेकिन यह आपकी आवश्यकताओं के अनुरूप भी हो सकता है।

— सज्जन
स्रोत

0

मेरे पास कोड नहीं है, लेकिन मुझे पता है कि मैंने एक बार ऊंचाई के संयोजन का उपयोग करके ऐसा किया था: 1000px और मार्जिन-नीचे: -1000px; उसकी कोशिश करो।

— अलेक्जेंडर मोरलैंड
स्रोत

वाह, यह वास्तव में काम करता है! लेकिन अगर सामग्री कंटेनर को ओवरफ्लो करती है, तो अतिप्रवाहित भाग को देखना संभव नहीं है ...

— एड्रिपिको

0

इस बात पर निर्भर करता है कि आपका लेआउट कैसे काम करता है, आप <html>तत्व पर पृष्ठभूमि की स्थापना के साथ दूर हो सकते हैं , जो हमेशा कम से कम व्यूपोर्ट की ऊंचाई है।

0

केवल स्टाइलशीट (CSS) का उपयोग करके इसे पूरा करना संभव नहीं है। कुछ ब्राउज़र स्वीकार नहीं करेंगे

height: 100%;

ब्राउज़र विंडो के दृष्टिकोण से अधिक मूल्य के रूप में।

जावास्क्रिप्ट सबसे आसान पार ब्राउज़र समाधान है, हालांकि जैसा कि उल्लेख किया गया है, स्वच्छ या सुंदर नहीं।

— मार्टिन
स्रोत

-2

मुझे पता है कि यह सबसे अच्छा तरीका नहीं है, लेकिन मैं अपने हेडर, मेन्यू इत्यादि स्थितियों को गड़बड़ किए बिना इसे समझ नहीं पाया। इसलिए .... मैंने उन दो कॉलम्स के लिए एक टेबल का इस्तेमाल किया। यह एक क्विक फिक्स था। कोई जे एस की जरूरत;)

— वेन-डी
स्रोत

-2

सबसे बड़े मानकों का सबसे अच्छा और न ही सबसे अच्छा कार्यान्वयन, लेकिन आप एक SPAN के लिए DIV को बदल सकते हैं ... यह इतना अनुशंसित नहीं है लेकिन तेजी से तय = P =)

— Metafaniel
स्रोत