सीएसएस के साथ एचटीएमएल में div की ऊंचाई सेट करना

मैं दो स्तंभों के साथ एक टेबल जैसा पेज डालने की कोशिश कर रहा हूं। मैं सही कॉलम को पृष्ठ के दाईं ओर डॉक करना चाहता हूं, और इस कॉलम में एक अलग पृष्ठभूमि रंग होना चाहिए। दाईं ओर की सामग्री लगभग हमेशा बाईं ओर से छोटी होने वाली है। मैं हमेशा नीचे की पंक्ति के लिए विभाजक तक पहुंचने के लिए पर्याप्त लंबा होने का अधिकार चाहता हूं। मैं अपनी पृष्ठभूमि रंग को उस स्थान को कैसे भर सकता हूं?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class = "स्निपेट-कोड">

 .rightfloat {
  लाल रंग;
  पृष्ठभूमि रंग: # बीबीबीबीबीबी;
  सही नाव;
  चौड़ाई: 200 पीएक्स;
}

।बाएं {
  फ़ॉन्ट आकार: 20pt;
}

। सेपरेटर {
  दोनों को साफ करो;
  चौड़ाई: 100%;
  सीमा-शीर्ष: 1 पीएक्स ठोस काला;
}  
 <div class = "विभाजक">
  <div class = "rightfloat">
    कुछ वास्तव में छोटी सामग्री।
  </div>
  <div class = "left">
    वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में
    वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में बड़ी सामग्री
  </div>
</div>
<div class = "विभाजक">
  <div class = "rightfloat">
    कुछ और छोटी सामग्री।
  </div>
  <div class = "left">
    वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में
    वास्तव में वास्तव में वास्तव में वास्तव में वास्तव में बड़ी सामग्री
  </div>
</div>  
</div></div>

संपादित करें: मैं मानता हूं कि यह उदाहरण बहुत सारणी जैसा है और वास्तविक तालिका एक अच्छी पसंद होगी। लेकिन मेरा "वास्तविक" पृष्ठ अंततः कम टेबल जैसा होगा, और मैं बस इस कार्य को मास्टर करना चाहता हूं!

साथ ही, किसी कारण से, जब मैं आईई 7 में अपनी पोस्ट बना / संपादित करता हूं, तो पूर्वावलोकन पूर्वावलोकन दृश्य में सही ढंग से दिखाई देता है, लेकिन जब मैं वास्तव में संदेश पोस्ट करता हूं, तो प्रारूपण हटा दिया जाता है। ऐसा लगता है कि फ़ायरफ़ॉक्स 2 में मेरी पोस्ट को संपादित करना, FWIW काम करता है।


एक और संपादन: हाँ, मैंने गेटकिल्लर के जवाब को अस्वीकार कर दिया। यह वास्तव में मेरे सरल पृष्ठ पर अच्छी तरह से काम करता है, लेकिन मेरे वास्तविक भारी पृष्ठ में नहीं। मैं उन कुछ लिंक की जांच करूंगा जो आपने मुझे इंगित किया है।

0
ro fr bn

13 उत्तर

मुझे अपनी साइट पर एक ही समस्या थी ( लापरवाही प्लग )।

मेरे पास एनवी सेक्शन "फ्लोट: दाएं" था और पृष्ठ के मुख्य भाग में दाईं ओर गठबंधन और "दोहराना-वाई" के बीच 250px की पृष्ठभूमि छवि है। मैंने फिर इसे "स्पष्ट: दोनों" के साथ कुछ जोड़ा। यहां डब्ल्यू 3 स्कूल्स और सीएसएस स्पष्ट संपत्ति है।

मैंने "पेज" वर्गीकृत div के निचले हिस्से में स्पष्ट रखा। मेरा पेज स्रोत ऐसा कुछ दिखता है।

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

मुझे आशा है कि वह मदद करेंगे :)

0
जोड़ा

बस यहां मदद करने की कोशिश कर रहा है ताकि कोड अधिक पठनीय हो।
याद रखें कि आप "101010" के साथ शीर्ष पर दिए गए बटन पर क्लिक करके कोड स्निपेट डाल सकते हैं। बस अपना कोड दर्ज करें और फिर इसे हाइलाइट करें और बटन पर क्लिक करें।

यहाँ एक उदाहरण है:

<html>
    <body>
    


0
जोड़ा

अहम ...

आपके प्रश्न का संक्षिप्त उत्तर यह है कि आपको शरीर और एचटीएमएल टैग में 100% की ऊंचाई निर्धारित करनी होगी, फिर प्रत्येक div तत्व पर ऊंचाई 100% निर्धारित करें, जिसे आप पृष्ठ की 100% ऊंचाई बनाना चाहते हैं।

दरअसल, अधिकांश डिजाइन स्थितियों में 100% ऊंचाई काम नहीं करेगी - यह छोटा हो सकता है लेकिन यह एक अच्छा जवाब नहीं है। Google "कोई कॉलम सबसे लंबा" लेआउट। बाएं और दाएं कोल्स को एक रैपर div के अंदर डालने का सबसे अच्छा तरीका है, बाएं और दाएं कोल्स को फ़्लोट करें और फिर रैपर को फ़्लोट करें - इससे यह आंतरिक कंटेनरों की ऊंचाई तक फैलता है - फिर पृष्ठभूमि सेट करें बाहरी आवरण पर छवि। लेकिन यदि आप आईई "डबल मार्जिन फ्लोट बग" प्राप्त करते हैं तो फ्लोट किए गए तत्वों पर किसी भी क्षैतिज मार्जिन के लिए देखें।

0
जोड़ा
अच्छा, धन्यवाद पोल्सनबी।
जोड़ा लेखक Mukul Kant, स्रोत

इसे आज़माएं:

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

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>
</div> </div>
0
जोड़ा

आपके प्रश्न का संक्षिप्त उत्तर यह है कि आपको शरीर और एचटीएमएल टैग में 100% की ऊंचाई निर्धारित करनी होगी, फिर प्रत्येक div तत्व पर ऊंचाई 100% निर्धारित करें, जिसे आप पृष्ठ की 100% ऊंचाई बनाना चाहते हैं।

0
जोड़ा

मैं 2 विकल्पों के बारे में सोच सकता हूँ

  1. Use JavaScript to resize the smaller column on page load.
  2. Fake the equal heights by setting the background-color for the column on the container <div/> instead (<div class="separator"/>) with repeat-y
0
जोड़ा

मैंने कड़ाई से सीएसएस पर छोड़ दिया और थोड़ा jQuery इस्तेमाल किया:

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);
0
जोड़ा

सीएसएस में काम करने के लिए एक 2 कॉलम लेआउट थोड़ा मुश्किल है (कम से कम CSS3 तक व्यावहारिक है।)

फ़्लोटिंग बाएं और दाएं एक बिंदु पर काम करेंगे, लेकिन यह आपको पृष्ठभूमि का विस्तार करने की अनुमति नहीं देगा। पृष्ठभूमि को ठोस बनाने के लिए, आपको "गलत कॉलम" नामक तकनीक को कार्यान्वित करना होगा, जिसका मूल रूप से अर्थ है कि आपके कॉलम में पृष्ठभूमि छवि नहीं होगी। आपके 2 कॉलम एक मूल टैग के अंदर निहित होंगे। इस मूल टैग को पृष्ठभूमि छवि दी जाती है जिसमें आपके इच्छित 2 कॉलम रंग होते हैं। इस पृष्ठभूमि को जितना बड़ा हो उतना बड़ा बनाएं (यदि यह एक ठोस रंग है, केवल इसे 1 पिक्सेल ऊंचा बनाएं) और इसे दोहराएं- y। AListApart के पास यह काम करने के लिए आवश्यक चीज़ों पर एक बड़ी पैदल यात्रा है।

http://www.alistapart.com/articles/fauxcolumns/

0
जोड़ा

Some browsers support CSS tables, so you could create this kind of layout using the various CSS display: table-* values. There's more information on CSS tables in this article (and the book of the same name) by Rachel Andrew: Everything You Know About CSS is Wrong

यदि आपको पुराने ब्राउज़र में लगातार लेआउट की आवश्यकता है जो सीएसएस टेबल का समर्थन नहीं करते हैं, तो आपको दो चीजें करने की आवश्यकता है:

  1. Make your "table row" element clear its internal floated elements.

    The simplest way of doing this is to set overflow: hidden which takes care of most browsers, and zoom: 1 to trigger the hasLayout property in older versions of IE.

    There are many other ways of clearing floats, if this approach causes undesirable side effects you should check the question which method of 'clearfix' is best and the article on having layout for other methods.

  2. Balance the height of the two "table cell" elements.

    There are two ways you could approach this. Either you can create the appearance of equal heights by setting a background image on the "table row" element (the faux columns technique) or you can make the heights of the columns match by giving each a large padding and equally large negative margin.

    Faux columns is the simpler approach and works very well when the width of one or both columns is fixed. The other technique copes better with variable width columns (based on percentage or em units) but can cause problems in some browsers if you link directly to content within your columns (e.g. if a column contained <div id="foo"></div> and you linked to #foo)

कॉलम की ऊंचाई को संतुलित करने के लिए पैडिंग / मार्जिन तकनीक का उपयोग करके यहां एक उदाहरण दिया गया है।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class = "स्निपेट-कोड">

 html, body {
  ऊंचाई: 100%;
}

.row {
  ज़ूम: 1; / * IE में आंतरिक फ्लोट साफ़ करें * /
  छिपा हुआ सैलाब; / * आंतरिक फ्लोट साफ़ करें * /
}

।दक्षिण पक्ष क़तार,
बाएं कॉलम {
  पैडिंग-तल: 1000em; / * कॉलम की ऊंचाइयों को संतुलित करें * /
  मार्जिन-तल: -1000em; / * * /
}

।दक्षिण पक्ष क़तार {
  चौड़ाई: 20%;
  सही नाव;
}

बाएं कॉलम {
  चौड़ाई: 79%;
  बाईंओर तैरना;
}  
 <div class = "row">
  <div class = "दाएं-कॉलम"> दायां कॉलम सामग्री </div>
  <div class = "left-column"> बाएं कॉलम सामग्री </div>
</div>
<div class = "row">
  <div class = "दाएं-कॉलम"> दायां कॉलम सामग्री </div>
  <div class = "left-column"> बाएं कॉलम सामग्री </div>
</div>  
</div></div>

नेटली डाउन द्वारा यह बारकैम्प डेमो भी उपयोगी हो सकता है जब अतिरिक्त कॉलम और अच्छी दूरी और पैडिंग जोड़ने का तरीका पता लगाना: समान ऊँचाई कॉलम और अन्य चालें (यह भी है जहां मैंने पहली बार कॉलम ऊंचाइयों को संतुलित करने के लिए मार्जिन / पैडिंग चाल के बारे में सीखा)

0
जोड़ा
मेरे लिए काम किया धन्यवाद :)
जोड़ा लेखक Vivek Sampara, स्रोत

अपने सीएसएस लिखने की कोई ज़रूरत नहीं है, आपके एचटीएमएल हेड सेक्शन में कॉल करके "बूटस्ट्रैप सीएसएस" नामक एक लाइब्रेरी है, हम कई स्टाइलिंग प्राप्त कर सकते हैं, यहां एक उदाहरण दिया गया है: यदि आप एक पंक्ति में दो कॉलम प्रदान करना चाहते हैं, तो आप बस निम्न कार्य कर सकते हैं:

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>
</div> </div>

यहां एमडी मध्यम डिवाइस के लिए खड़ा है, आप छोटे उपकरणों के लिए col-sm-6 का उपयोग कर सकते हैं और अतिरिक्त छोटे उपकरणों के लिए col-xs-6

0
जोड़ा

Here's an example of equal-height columns - Equal Height Columns - revisited

You can also check out the idea of "Faux Columns" as well - Faux Columns

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

0
जोड़ा

ऐसा करने के लिए बस CSS प्रॉपर्टी width का उपयोग करना पर्याप्त है।

यहाँ एक उदाहरण है:



0
जोड़ा
स्टैक ओवरफ़्लो में आपका स्वागत है! आपकी पोस्ट के लिए धन्यवाद! कृपया अपनी पोस्ट में हस्ताक्षर / टैगलाइन का उपयोग न करें। आपका उपयोगकर्ता बॉक्स आपके हस्ताक्षर के रूप में गिना जाता है, और आप अपनी प्रोफ़ाइल का उपयोग अपने पसंदीदा बारे में किसी भी जानकारी को पोस्ट करने के लिए कर सकते हैं। हस्ताक्षर / टैगलाइन पर अक्सर पूछे जाने वाले प्रश्न
जोड़ा लेखक Andrew Barber, स्रोत

यह आपके लिए काम करना चाहिए: html और body तत्वों के लिए ऊंचाई को अपने सीएसएस में 100% पर सेट करें। फिर आप div में अपनी आवश्यकताओं के लिए ऊंचाई समायोजित कर सकते हैं।

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 
0
जोड़ा