सामग्री के तल पर बूटस्ट्रैप पाद छड़ी बनाएं

वेबपेज कंटेंट के निचले हिस्से में फूटर स्टिक बनाने की कोशिश करने में मुझे 3 दिन हो गए हैं। मुझे पता है कि बहुत सारे समान प्रश्न हैं, लेकिन मुझे समाधान के रूप में कुछ भी नहीं मिला। यहाँ मेरा कोड है:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.container{position:relative;}
 footer{position:absolute;bottom:0;}
 <div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>

   
</div> </div>

0

6 उत्तर

If you want it to be at the bottom of the page & not the viewport you have to set height for the content so that the absolute footer will be at the bottom.

Else change its relative parent class. Here I set body as the parent for the footer

इसे इस्तेमाल करे..

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body{position:relative;}
.container{
height:800px;
}

footer{
position:absolute;
bottom:0;
left:0;
}
<div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

1
जोड़ा
मैंने जवाब अपडेट कर दिया है कृपया इसे भी देखें!
जोड़ा लेखक Viira, स्रोत
मैं चाहता हूं कि यह सिर्फ वेबपेज के निचले भाग में हो चिपचिपा नहीं
जोड़ा लेखक ElleWilliamssss, स्रोत

आप उसी के लिए नीचे दिए गए उदाहरण का उपयोग कर सकते हैं।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 
html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 50px;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.

</div> <div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet</div>
</div> </div>
0
जोड़ा

आप उसी के लिए नीचे दिए गए उदाहरण का उपयोग कर सकते हैं।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 
html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 50px;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, a, assumenda. Quo architecto commodi vero, omnis amet accusantium at temporibus molestiae sed ipsum debitis culpa voluptate recusandae velit, deserunt sunt.

</div> <div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet</div>
</div> </div>
0
जोड़ा

use position:sticky;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

container{position:relative;}
footer{position:sticky;bottom:0;}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row h-100">
        <div class="col">
          
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

</div>
</div> </div>

OR use position:relative to .container with .col{padding-bottom:5rem; }

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.container{
position:relative;
}
.col{
padding-bottom:5rem;
}
footer{
   
   position: absolute;
    bottom: 0;
    }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

0
जोड़ा
तुम्हारा मतलब क्या है?
जोड़ा लेखक לבני מלכה, स्रोत
कृपया मेरा संपादन देखें
जोड़ा लेखक לבני מלכה, स्रोत
नहीं, मैं नहीं चाहता कि यह व्यूपोर्ट के निचले हिस्से में हो। मैं चाहता हूं कि यह पृष्ठ के निचले भाग पर हो।
जोड़ा लेखक ElleWilliamssss, स्रोत

use position:sticky;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

container{position:relative;}
footer{position:sticky;bottom:0;}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row h-100">
        <div class="col">
          
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

</div>
</div> </div>

OR use position:relative to .container with .col{padding-bottom:5rem; }

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.container{
position:relative;
}
.col{
padding-bottom:5rem;
}
footer{
   
   position: absolute;
    bottom: 0;
    }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <div class="container">
        <div class="row h-100">
            <div class="col">
              
content


content


content


content


content


content


content


content


content


content


content


content


content


content

</div> </div>

contact us

    </div>
</div> </div>

0
जोड़ा
तुम्हारा मतलब क्या है?
जोड़ा लेखक לבני מלכה, स्रोत
कृपया मेरा संपादन देखें
जोड़ा लेखक לבני מלכה, स्रोत
नहीं, मैं नहीं चाहता कि यह व्यूपोर्ट के निचले हिस्से में हो। मैं चाहता हूं कि यह पृष्ठ के निचले भाग पर हो।
जोड़ा लेखक ElleWilliamssss, स्रोत

यदि आप चाहते हैं कि यह <�कोड> कंटेनर </कोड> के नीचे चिपका हो तो <�कोड> स्थिति: सापेक्ष </कोड> का उपयोग करें या केवल <�कोड> स्थिति </कोड> को पूरी तरह से हटा दें।

0
जोड़ा