एक div की सामग्री को नीचे से कैसे संरेखित करें

Question

कहो कि मेरे पास निम्नलिखित सीएसएस और HTML कोड हैं:

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

शीर्ष लेख अनुभाग ऊँचाई तय है, लेकिन शीर्षक सामग्री बदल सकती है।

मैं हेडर की सामग्री को हेडर सेक्शन के निचले भाग से जोड़कर रखना चाहूंगा, इसलिए हेडर सेक्शन के निचले भाग में टेक्स्ट "लाठी" की अंतिम पंक्ति होगी।

इसलिए यदि पाठ की केवल एक पंक्ति है, तो यह इस तरह होगी:

-----------------------------
| शीर्षक शीर्षक
|
|
|
| शीर्ष लेख सामग्री (एक पंक्ति में परिणामी)
-----------------------------

और अगर तीन लाइनें थीं:

-----------------------------
| शीर्षक शीर्षक
|
| हेडर कंटेंट (जो ऐसा है
| बहुत सामान है कि यह पूरी तरह से
| तीन लाइनों पर फैला हुआ)
-----------------------------

CSS में यह कैसे किया जा सकता है?

Answer 1

रिश्तेदार + पूर्ण स्थिति आपकी सबसे अच्छी शर्त है:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

लेकिन आप इसके साथ मुद्दों में भाग सकते हैं। जब मैंने इसकी कोशिश की तो मुझे सामग्री के नीचे दिखाई देने वाले ड्रॉपडाउन मेनू के साथ समस्या थी। यह सिर्फ सुंदर नहीं है।

ईमानदारी से, ऊर्ध्वाधर केंद्रित मुद्दों के लिए और, अच्छी तरह से, आइटम के साथ किसी भी ऊर्ध्वाधर संरेखण मुद्दे तय ऊंचाई नहीं हैं, यह सिर्फ तालिकाओं का उपयोग करने के लिए आसान है।

उदाहरण: क्या आप तालिकाओं का उपयोग किए बिना इस HTML लेआउट को कर सकते हैं?

Comments

मैंने वास्तव में यहाँ पूछने से पहले उस समाधान को पाया, लेकिन किसी तरह स्थिति जोड़ना भूल गया: रिश्तेदार; हेडर div और सामग्री पृष्ठ के निचले भाग पर लैंडिंग करता रहा। धन्यवाद

— क्रिस्तोफ २५'०

आप इसे सामने लाने के लिए z-index संपत्ति के साथ अपनी ड्रॉपडाउन स्थिति का प्रबंधन कर सकते हैं। याद रखें कि जेड-इंडेक्स संपत्ति अपेक्षाकृत या बिल्कुल तैनात तत्वों के साथ काम करती है। इसके अलावा, लेआउट परिणामों को प्राप्त करने के लिए तालिका का उपयोग करने के लिए शब्दार्थ रूप से सही नहीं है।

— अलेजांद्रो गार्सिया इग्लेसियस

मूल समस्या में वर्णित पाठ्य सामग्री के मामले में, # हेडर-कंटेंट वास्तव में एक pतत्व होना चाहिए , या बहुत कम से कम एकspan

— जोश बर्गेस

गैर-सारणीबद्ध डेटा के लिए तालिकाओं का उपयोग न करें! इसके बजाय, सीएसएस प्रदर्शन गुणों का उपयोग करें display: table-cell, या table-row, या table। आपको फिर से शुद्ध लेआउट के लिए तालिकाओं का उपयोग करने की आवश्यकता नहीं है।

— जेरेमी मोरिट्ज़

हैडर की स्थिति किसके सापेक्ष है?

— स्टैक 1

Answer 2

सीएसएस स्थिति का प्रयोग करें:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

जैसा कि cletus ने उल्लेख किया है , आपको यह काम करने के लिए हेडर-कंटेंट की पहचान करने की आवश्यकता है।

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

Comments

फी ... यह मेरी हेडर-सामग्री को उसकी चौड़ाई को width = '100%'

— ढहाने का

@dsdsdsdsd प्रदर्शन को जोड़कर आप इसे ठीक भी कर सकते हैं: ब्लॉक # हेडर-कंटेंट के लिए।

— पैट्रिक मैक्लेनी

@dsdsdsdd इसका कारण यह है कि <span>तत्व display: inline;डिफ़ॉल्ट रूप से होते हैं, जो कंटेनर की पूरी चौड़ाई नहीं लेते हैं। सबसे उपयुक्त फिक्स स्पैन को एक में बदलना होगा <div>, जो डिफ़ॉल्ट रूप से एक ब्लॉक तत्व है।

— BadHorsie

या <h1> - <h6> में से एक, जो डिफ़ॉल्ट रूप से भी ब्लॉक होता है और टेक्स्ट को हेडर के रूप में पहचानता है, जो सर्च इंजन, सहायक तकनीकों और कोड को पढ़ने वाले लोगों के लिए उपयोगी है।

— पैट्रिक मैक्लेनी

तब काम नहीं करता जब तल पर सामग्री की चर ऊंचाई होती है, यह कंटेनर की सीमा से बाहर का कारण बनता है।

— मोजफेट

Answer 3

यदि आप विरासत ब्राउज़र के बारे में चिंतित नहीं हैं तो फ्लेक्सबॉक्स का उपयोग करें।

मूल तत्व को अपने प्रदर्शन प्रकार को फ्लेक्स पर सेट करने की आवश्यकता होती है

div.parent {
  display: flex;
  height: 100%;
}

फिर आप फ्लेक्स-एंड में चाइल्ड एलिमेंट के अलाइन-सेल्फ को सेट करें।

span.child {
  display: inline-block;
  align-self: flex-end;
}

यहां वह संसाधन है जो मैंने सीखा है: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

@bafromca, दो कारण जो काम नहीं करते हैं। 1: संरेखण-आइटम (मेरी गलती है, मैंने अपना मूल पोस्ट संपादित किया है) के बजाय 'संरेखित करें' का उपयोग करें। 2: 100% ऊँचाई तब तक काम नहीं करेगी जब तक माता पिता की ऊँचाई नहीं होगी।

— ली इरविन

मेरे लिए काम नहीं किया, मैं इसे कंटेनर के नीचे चाहता हूं, कंटेनर में वस्तुओं का अंत नहीं।

— मोजफेट

2020 में यह सही उत्तर होना चाहिए: caniuse.com/#feat=flexbox

— tonygatta

Answer 4

मैं इन गुणों का उपयोग करता हूं और यह काम करता है!

#header {
  display: table-cell;
  vertical-align: bottom;
}

Comments

IE8 और पूर्व में समर्थित नहीं है। यह IE9 में समर्थित है।

— random_user_name

@cale_b के अनुसार caniuse.com यह करता है IE8 में काम करते हैं।

— Zach Lysobey

@ZachL Happenstance - मैं एक कॉर्पोरेट क्लाइंट के लिए IE8 में एक विरासत ऐप का समर्थन कर रहा हूं और यह वास्तव में काम करता है ।

— डैनियल ज़ैबाओ

@fguillen: Chrome (v31) में अभी-अभी परीक्षण किया गया है। वहाँ भी काम करता है।

— डैनियल स्जाबो

table-cellबहुत सी चीजों को तोड़ता है। बूटस्ट्रैप ग्रिड सिस्टम की तरह। col-md-12तुम अब एक 100% चौड़ा div नहीं देंगे।

— नूह

Answer 5

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

• आवश्यकता नहीं है कि मैं कंटेनर की ऊंचाई जानता हूं।
• सापेक्ष + निरपेक्ष समाधान के विपरीत, सामग्री अपनी परत में तैरती नहीं है (यानी, यह कंटेनर डिव में सामान्य रूप से एम्बेड करता है)।
• ब्राउज़रों (IE8 +) के पार काम करता है।
• लागू करने के लिए सरल।

समाधान सिर्फ एक लेता है <div>, जिसे मैं "एलाइनर" कहता हूं:

सीएसएस

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

एचटीएमएल

<div class="bottom_aligner"></div>
... Your content here ...

यह ट्रिक एक लंबा, स्किनी डिव बनाकर काम करती है, जो टेक्स्ट बेसलाइन को कंटेनर के निचले हिस्से में धकेल देती है।

यहां एक पूर्ण उदाहरण है जो ओपी के लिए पूछ रहा था कि क्या प्राप्त होता है। मैंने केवल प्रदर्शन उद्देश्यों के लिए "bottom_aligner" को मोटा और लाल बनाया है।

सीएसएस:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Comments

लगभग सही :) लेकिन यह स्वचालित लाइन को तोड़ने की अनुमति नहीं देता है।

— गैस्टन सांचेज़

बाहरी कंटेनर स्क्रॉल कर सकते हैं (अतिप्रवाह-वाई: ऑटो) काम नहीं करता है। :(

— ecraig12345

मुझे लगता है कि marin: 8px मार्जिन

— ग्राहम पेरिन

यह भी काम करता है अगर एक ::beforeनियम में रखा जाए , जो एक अतिरिक्त तत्व की आवश्यकता को हटा देता है। हमने अंत में फ्लेक्स का उपयोग किया, लेकिन जब आप नहीं कर सकते तो यह उपयोगी है।

— भेड़ का बच्चा

यह एक बहुत अच्छा समाधान है। यह केवल तभी काम करता heightहै जब बॉक्स / कंटेनर और उसके माता-पिता सेट हो (px या% या जो भी हो)।

— बैरादेव

Answer 6

इसे करने का आधुनिक तरीका फ्लेक्सबॉक्स का उपयोग करना होगा । नीचे दिए गए उदाहरण देखें। आपको Some text...किसी भी HTML टैग में लपेटने की भी आवश्यकता नहीं है , क्योंकि फ्लेक्स कंटेनर में सीधे टेक्स्ट एक गुमनाम फ्लेक्स आइटम में लिपटे हुए हैं।

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

यदि केवल कुछ पाठ है और आप कंटेनर के निचले भाग में लंबवत संरेखित करना चाहते हैं।

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

Comments

मुझे अपने निचले-संरेखित तत्व की आवश्यकता अभी भी दस्तावेज़ प्रवाह में मौजूद है, जिसका उपयोग करते समय संभव नहीं है position:absolute;। इस समाधान ने मेरे मामले के लिए पूरी तरह से काम किया!

— स्वेन

प्रतिक्रिया घटकों के अंदर, यह सही समाधान है। स्वीकृत समाधान विफल हो जाता है।

— सोइल - मैथ्यू प्रिवोट

यह एकमात्र समाधान है जो वास्तव में मेरे लिए काम करता है। शायद इसे रिएक्ट के साथ करना होगा, जैसा कि @Soleil ने उल्लेख किया है ... मैं सीएसएस विशेषज्ञ नहीं हूं, इसलिए मैं पूरी तरह से निश्चित नहीं हूं।

— बीके

प्रतिक्रिया घटक में पूरी तरह से काम करता है

— user1155773

Answer 7

इनलाइन या इनलाइन-ब्लॉक तत्वों को ब्लॉक स्तर के तत्वों के तल में संरेखित किया जा सकता है यदि इनलाइन तत्व की तुलना में मूल / ब्लॉक तत्व की लाइन-ऊंचाई अधिक है। *

मार्कअप:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

सीएसएस:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* सुनिश्चित करें कि आप मानक मोड में हैं

Answer 8

display: flex;
align-items: flex-end;

Comments

ध्यान दें कि फ्लेक्सबॉक्स पुराने ब्राउज़रों में अच्छी तरह से समर्थित नहीं है।

— एंथनीबी

@AnthonyB - पुराने को परिभाषित करें? हमें इस रिकॉर्ड को डेवलपर्स के रूप में बदलना होगा। प्रौद्योगिकी आगे बढ़ती है, और पुरानी बस जीवित नहीं रहती है। IE9 और 10 में फ्लेक्स के साथ समस्याएं हैं जो मैं देख सकता हूं, लेकिन वे क्रमशः 2011 और 2012 में जारी किए गए थे ... यह 2017 है। हमें इन पुराने और टूटे हुए ब्राउज़रों को छोड़ देना होगा। यदि दृश्य संतुष्टि के लिए नहीं, लेकिन सुरक्षा और सामान्य सॉफ़्टवेयर अपडेट के लिए।

— Tisch

@Tisch आप बिल्कुल सही हैं, हमें डेवलपर्स के रूप में, सभ्य और हालिया तकनीक का उपयोग करना है। लेकिन मैं बस इस संगतता मुद्दे के बारे में चेतावनी देता हूं, ताकि आश्चर्यचकित न हो।

— एंथनीबी

अगर सामग्री के <h1>अंदर है <p>या <div>मैं उपयोग करेंगे justify-content: space-between।

— agapitocandemor

Answer 9

आप बस फ्लेक्स हासिल कर सकते हैं

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Answer 10

यदि आपके पास एक से अधिक, डायनेमिक ऊंचाई वाले आइटम हैं, तो टेबल और टेबल-सेल के सीएसएस प्रदर्शन मूल्यों का उपयोग करें:

एचटीएमएल

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

सीएसएस

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

मैंने यहाँ एक JSBin डेमो बनाया है: http://jsbin.com/inonAkuF/2/edit

डेमो में एक उदाहरण भी है कि एक ही तकनीक का उपयोग करते हुए लंबवत केंद्र संरेखित कैसे करें।

Answer 11

यहां फ्लेक्सबॉक्स का उपयोग करके एक और समाधान है, लेकिन नीचे संरेखण के लिए फ्लेक्स-एंड का उपयोग किए बिना । शेष सामग्री को नीचे तक धकेलने के लिए विचार h1 को ऑटोmargin-bottom पर सेट करना है:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

हम margin-top:autoपाठ के साथ भी ऐसा कर सकते हैं लेकिन इस मामले में हमें इसे एक divया अंदर लपेटने की आवश्यकता है span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

Comments

Perfecto! ग्रेसिया

— अनुग्रह निकोल

Answer 12

इसके लिए आपको निरपेक्ष + सापेक्ष की आवश्यकता नहीं है। कंटेनर और डेटा दोनों के लिए सापेक्ष स्थिति का उपयोग करना बहुत संभव है। इसे आपको इसी तरह करना होगा।

मान लें कि आपके डेटा की ऊंचाई बढ़ने वाली है x। आपका कंटेनर सापेक्ष है और पाद भी सापेक्ष है। आपको बस अपने डेटा में जोड़ना है

bottom: -webkit-calc(-100% + x);

आपका डेटा हमेशा आपके कंटेनर के निचले भाग में होगा। यहां तक ​​कि अगर आप गतिशील ऊंचाई के साथ कंटेनर है काम करता है।

HTML ऐसा होगा

<div class="container">
  <div class="data"></div>
</div>

सीएसएस इस तरह होगा

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

इसका जीता जागता उदाहरण है

उम्मीद है की यह मदद करेगा।

Comments

क्या आप बता सकते हैं कि क्या bottom: -webkit-calc(-100% + x);कर रहा है?

— मुहूर्त

@ यह कंटेनर के तल पर पाद रखता है।

— आदित्य पोंक्षे

Answer 13

यहाँ यह करने के लिए लचीला तरीका है। बेशक, यह IE8 द्वारा समर्थित नहीं है, क्योंकि उपयोगकर्ता को 7 साल पहले की आवश्यकता थी। आपको जो समर्थन करने की आवश्यकता है, उसके आधार पर, इनमें से कुछ को दूर किया जा सकता है।

फिर भी, यह अच्छा होगा यदि बाहरी कंटेनर के बिना ऐसा करने का एक तरीका था, बस पाठ को स्वयं के भीतर संरेखित करना है।

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

Answer 14

एक बहुत ही सरल, एक-पंक्ति समाधान, लाइन-हीगेट को div में जोड़ना है, यह ध्यान में रखते हुए कि सभी पाठ का पाठ नीचे जाएगा।

सीएसएस:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

ध्यान रखें कि यह एक व्यावहारिक और तेज़ समाधान है जब आप बस चाहते हैं कि डिव के अंदर का पाठ नीचे जाए, यदि आपको छवियों और सामान को संयोजित करने की आवश्यकता है, तो आपको थोड़ा और अधिक जटिल और उत्तरदायी सीएसएस कोड करना होगा

Answer 15

यदि आप सामग्री के रैपिंग डिव की ऊंचाई निर्धारित कर सकते हैं (# हेडर-कंटेंट जैसा कि दूसरे के उत्तर में दिखाया गया है), पूरे #header के बजाय, शायद आप इस दृष्टिकोण को भी आज़मा सकते हैं:

एचटीएमएल

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

सीएसएस

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

कोडपेन पर दिखाएं

Answer 16

काम करने लगता है:

HTML: मैं सबसे नीचे हूं

सीएसएस:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

Answer 17

इन सभी जवाबों और किसी ने भी मेरे लिए काम नहीं किया ... मैं कोई फ्लेक्सबॉक्स विशेषज्ञ नहीं हूं, लेकिन यह तर्कसंगत रूप से आसान था, यह समझना और उपयोग करना सरल और आसान है। बाकी सामग्री से कुछ अलग करने के लिए, एक खाली div डालें और इसे स्पेस भरने दें।

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

यह अपेक्षित रूप से प्रतिक्रिया करता है जब नीचे की सामग्री भी निश्चित आकार की नहीं होती है जब कंटेनर स्थिर आकार का नहीं होता है।

Answer 18

मैंने एक तरीका तैयार किया है जो कि उल्लेखित की तुलना में बहुत सरल है।

हेडर div की ऊंचाई सेट करें। फिर उसके अंदर, अपने H1टैग को इस प्रकार से लिखें:

float: left;
padding: 90px 10px 11px

मैं एक ग्राहक के लिए एक साइट पर काम कर रहा हूं, और डिजाइन के लिए पाठ को एक निश्चित div के नीचे होना चाहिए। मैंने इन दो पंक्तियों का उपयोग करके परिणाम प्राप्त किया है, और यह ठीक काम करता है। इसके अलावा, यदि पाठ का विस्तार होता है, तो पैडिंग अभी भी वैसी ही रहेगी।

Comments

उत्तरदायी लेआउट का उपयोग करके स्क्रीन का आकार बदलने पर सामग्री अन्य सामग्री पर तैरने का कारण बनेगी।

— मोजफेट

Answer 19

मुझे यह समाधान डिफ़ॉल्ट बूटस्ट्रैप स्टार्ट टेम्पलेट पर मिला

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

Answer 20

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

Comments

यह शीर्ष div का आकार बदलने का कारण बनता है। जो मूल पाठ लेआउट के लिए काम करता है, लेकिन काम नहीं करता है जब चीजों का सम्मान करने के लिए पृष्ठभूमि और रंग और आकार होते हैं।

— मोजफेट

Answer 21

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

div.myclass { margin-top: 100%; }

इसे ठीक करने के लिए% बदलने का प्रयास करें। उदाहरण: 120% या 90% ... आदि।

Comments

सामग्री के 1 सेट के साथ पूरी तरह से ठीक काम करता है, लेकिन सामग्री में बदलाव होने पर इसे समायोजित करने की आवश्यकता होगी। यदि यह गतिशील सामग्री है, तो इसका उपयोग न करें!

— माइक ग्रेफ

Answer 22

जिस साइट पर मैंने सिर्फ एक क्लाइंट के लिए अनुरोध किया था कि पाद लेख एक उच्च बॉक्स था, नीचे के पाठ के साथ मैंने इसे सरल पैडिंग के साथ हासिल किया, सभी ब्राउज़रों के लिए काम करना चाहिए।

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

Comments

आपकी पहली घोषणा padding: 0 30pxथोड़ी निरर्थक है, आपने padding: 30pxअन्य 2 घोषणाओं को भी लागू कर दिया है ।

— एंड्रयू

बिल्कुल सच है, हालांकि मैं अपने कार्यस्थल की प्रथाओं का पालन कर रहा हूं।

— निकी एल। हैनसेन

वास्तव में?, यह सादे बुरे अभ्यास की तरह लगता है । बस आशुलिपि का उपयोग करें, या हर जगह स्पष्ट हो। padding: 60px 30px 8px;, padding: 60px 30px 8px 30px;चार स्पष्ट padding-नियम, या यहां तक ​​कि @ TheWaxMann के सुझाव सभी श्रेष्ठ हैं - और मैं तैयार हूं और यह तर्क देने में सक्षम हूं

— ;;

Answer 23

एक सही क्रॉस-ब्राउज़र उदाहरण शायद यह एक यहाँ है:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

विचार दोनों को तल पर प्रदर्शित करने के लिए है और यह भी वहाँ छड़ी बना रही है। अक्सर सरल दृष्टिकोण चिपचिपा div मुख्य सामग्री के साथ स्क्रॉल करेंगे।

निम्नलिखित पूरी तरह से काम करने का न्यूनतम उदाहरण है। ध्यान दें कि कोई div एम्बेडिंग प्रवंचना आवश्यक नहीं है। कई बीआरओ केवल स्क्रॉलबार को प्रदर्शित होने के लिए मजबूर करने के लिए हैं:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

यदि आप सोच रहे हैं कि आपका कोड IE पर काम नहीं कर रहा है, तो शीर्ष पर DOCTYPE टैग जोड़ना याद रखें। यह IE पर काम करने के लिए महत्वपूर्ण है। साथ ही, यह पहला टैग होना चाहिए और इसके ऊपर कुछ भी नहीं दिखाई देना चाहिए।

Comments

चूंकि आप अपने दस्तावेज़ को एक्सएचटीएमएल के रूप में सख्त घोषित कर रहे हैं, इसलिए आपको अपने <br />टैगों को भी बंद कर देना चाहिए ...

— एमोस कारपेंटर

@ KarlKildén अगर आप अआमोस से टिप्पणी का उल्लेख कर रहे थे, तो यह निश्चित रूप से एक मूर्खतापूर्ण टिप्पणी नहीं है - इसके सही content-typeहेडर के साथ उपरोक्त दस्तावेज़ की सेवा करने से ब्राउज़र में एक xml पार्सिंग त्रुटि होगी।

— रेजर

यह एक बुरा अभ्यास है! इसके बजाय CSS का उपयोग करें!

— m93a

Answer 24

काम करने लगता है:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

कम का उपयोग करना सीएसएस पज़ल्स को हल करने की तुलना में कोडिंग की तरह अधिक बनाता है ... मुझे सिर्फ सीएसएस से प्यार है। यह एक वास्तविक आनंद है जब आप पूरे लेआउट को बदल सकते हैं (इसे तोड़े बिना :) सिर्फ एक पैरामीटर बदलकर।

Answer 25

2015 समाधान

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

आपका स्वागत है

Comments

इसके लिए टेबल लेआउट समस्याग्रस्त हो सकता है; इसके बजाय CSS की सिफारिश की जाती है। एचटीएमएल 5 में वैध संपत्ति भी समर्थित नहीं है। (देखें w3schools.com/tags/att_td_valign.asp )

— undeniablyrob