एचटीएमएल शरीर इसकी सामग्री से छोटी है

यहाँ समस्या का एक बुनियादी illustration है:एचटीएमएल शरीर इसकी सामग्री से छोटी है

<html><head><style type="text/css"> 
    html {width: 100%; height: 100%; background: red;} 
    body {width: 100%; height: 100%; background: green;} 
     
    .leftbar, .rightbar {height: 100%; background: blue;} 

    .leftbar  {float: left;} 
    .rightbar {float: right;} 

    table {width: 100px; height: 800px; background: black; color: white; 
           margin: 0 auto 0 auto;} 
</style></head> 
<body> 
    <ul class="leftbar"><li>one</li><li>two</li></ul> 
    <ul class="rightbar"><li>alpha</li><li>beta</li></ul> 
    <table><tbody><tr><td>blah blah</td></tr></tbody></table> 
</body> 
</html>

हम तुरंत देख सकते हैं कि जारी ul तत्वों body जो उन्हें शामिल के रूप में के रूप में लंबे हैं, समस्या यह है कि body है सकते हैं table जितना लंबा नहीं है जिसमें यह शामिल है।

मैं body कैसे बड़ा कर सकता हूं? इस उदाहरण में, मैं leftbar और rightbar चाहता हूं ताकि स्क्रॉलिंग की अनुमति मिल सके, ताकि आप नीचे दिए गए किसी भी अंतर को कभी न देख सकें।

स्रोत

2012-02-22 spraff

-1

टेबल का उपयोग करें। वे अशुद्ध हैं लेकिन वे काम काम करते हैं।

div-based समाधानों में अस्वीकार्य समझौता (पूर्ण आयाम, फ्लोट का नुकसान) शामिल है।

स्रोत

2012-02-24 17:09:06 spraff

_fsvo_ "काम"। यह सोचने के लिए बहुत कम है कि सिर्फ इसलिए कि वे आपके विशेष उपयोग के मामले के लिए काम करते हैं, वे _must_ उन सभी अन्य संदर्भों के लिए काम करते हैं जिनमें आपकी सामग्री का उपयोग किया जाएगा। –

वे निरंतर संदर्भ में काम करते हैं, और विकल्प * नहीं *। – spraff

यह हमारे समुदाय पर अच्छी तरह से प्रतिबिंबित नहीं करता है कि हम एक वैध उत्तर को कम वोट देते हैं जो संभावित रूप से ओपी की समस्या को हल करता है, क्योंकि यह फैशन से बाहर है। टेबल्स को बनाए रखना मुश्किल होता है, और सामान्य प्रवाह तोड़ते हैं, लेकिन वे कई कांटेदार लेआउट समस्याओं के लिए एक बुद्धिमान समाधान हैं, खासकर प्री-फ्लेक्सबॉक्स दुनिया में। (जैसा कि 'डिस्प्ले: टेबल' है, एक सामान्य ब्लॉक-स्तरीय तत्व पर।) – XML

अपने body नियम से height: 100% हटाएं - यह शरीर को व्यूपोर्ट ऊंचाई (जो सामग्री ऊंचाई से कम है) के रूप में लंबा बनाता है।

स्रोत

2012-02-22 16:02:58

इससे 'शरीर' लंबा हो जाता है, लेकिन 'उल' अभी भी व्यूपोर्ट की ऊंचाई है। – spraff

समझ में आता है। 'शरीर' को भरने के लिए 'उल' के लिए, इसे कुछ निश्चित ऊंचाई सेट करने की आवश्यकता है। इसे '800px' पर सेट करें, जो कि सबसे ऊंचे बाल तत्व के समान है। –

यह इतनी समझ में आता है और एक साल पहले की तरह इस साइट पर इस यादृच्छिक रूप से कष्टप्रद मुद्दे को पूरी तरह से ठीक कर दिया गया था। मैंने इसे ऊंचाई से स्विच किया: 100% से न्यूनतम ऊंचाई: 100% उन पृष्ठों के लिए खाते हैं जहां शरीर व्यूपोर्ट से छोटा है। धन्यवाद! – elainevdw

body{ height:100%; }

यह कोड की गलतफहमी प्रतीत होता है। एक "100%" ऊंचाई कुछ के सापेक्ष है। दूसरे शब्दों में "100% क्या?"

यह क्या करता है शरीर = विंडो का आकार सेट करता है। JSFiddle में, यह प्रस्तुत बॉक्स का आकार है। ब्राउज़र पर, यह देखने वाली विंडो का 100% होगा।

तो, यदि आपकी ब्राउज़र विंडो को एक छोटे से दृश्य स्थान पर छोटा करें, तो 100% ऊंचाई छोटे आकार का 100% होगी। जो सटीक है।

यदि आपके पास ऐसी सामग्री है जो उससे अधिक है, तो आप अपने उदाहरण में देखे गए मुद्दों में भाग लेते हैं। याद रखें कि तालिका एक बाल तत्व है, न कि माता-पिता कंटेनर। सीएसएस माता-पिता से विरासत में आता है, बच्चों को नहीं। तो आपको यह सुनिश्चित करना होगा कि शरीर इसकी ऊंचाई सेटिंग में गतिशील बना रहता है।

अद्यतन

यहाँ शरीर पर मिनट-ऊंचाई के लिए एक JSFiddle है; http://jsfiddle.net/uZCKn/1/ काम करने के लिए एचटीएमएल ऊंचाई 100% होने की आवश्यकता है। यह मिला कि: min-height does not work with body

एकमात्र चीज जिसे मैं सोच सकता हूं वह एक जावास्क्रिप्ट है जो साइड बार की ऊंचाई सेट करने या गलत-कॉलम का उपयोग करने के लिए है। लेकिन बाएं/दाएं बार को इसके कंटेनर ऊंचाई को भरने के लिए कुछ और भी हो सकता है, साथ ही मैं याद कर रहा हूं।

एक स्पष्टीकरण का हिस्सा है।

स्रोत

2012-02-22 16:14:01 jmbertucci

http://jsfiddle.net/6ZeLh/

ठीक करने के लिए शरीर की ऊंचाई सभी तरह नहीं जा रहा नीचे min-height:100% को body{height:100%} बदल जाते हैं। यदि आप परवाह करते हैं, तो यह आईई 6 में काम नहीं करेगा। अपनी सूचियों को ठीक करने के लिए फ्लोट आउट करें। position:relativebody में जोड़े, .leftbar, .rightbar को position:absolute जोड़ सकते हैं और स्थिति को निर्धारित किया इस प्रकार

.leftbar {left:0; top:0;} 
.rightbar {right:0; top:0;}

आप बेला मैं ऊपर लिंक में देख सकते हैं।

स्रोत

2012-02-22 16:21:32 hradac

आह, यह एक अच्छा फिक्स है। साइड बार पूर्ण स्थिति बनाओ। – jmbertucci

यदि आप फ्लोट्स का उपयोग करते हैं, तो आपको clearfix का उपयोग करना होगा। उदाहरण (अतिप्रवाह: माता पिता div करने के लिए छिपा हुआ आप एक सरल स्पष्ट ठीक देना):

<div style="overflow: hidden;"> 
    <ul class="leftbar"> 
     <li>one</li> 
     <li>two</li> 
    </ul> 
    <ul class="rightbar"> 
     <li>alpha</li> 
     <li>beta</li> 
    </ul> 
</div>

आप विशेष रूप से अपने मामले के लिए और अधिक clearfixes गूगल कर सकते हैं,

स्रोत

2016-03-19 08:38:14 Indevelop

html, body { height: 100%; }

हटाने और

जोड़ने

body { height: fit-content; }

दूसरी बात यह प्रमाण पत्र है कि बाल div नहीं है जो चीजों को छोटा कर रहा है तो यह वास्तव में होना चाहिए।

स्रोत

2017-11-07 14:27:53

'फिट-कंटेंट' एक प्रयोगात्मक संपत्ति है जिसका उपयोग 2017 में उत्पादन कोड में नहीं किया जाना चाहिए। – TylerH

@ टाइलर एच आप कुछ और जानने के लिए कुछ लिंक पोस्ट कर सकते हैं इस मुद्दे के बारे में? –

एचटीएमएल शरीर इसकी सामग्री से छोटी है

उत्तर

संबंधित मुद्दे