100% ऊंचाई में स्क्रॉलिंग सेल तालिका

मुझे खेद है कि यह पहले से ही उत्तर दिया गया था, लेकिन "100% ऊंचाई" के साथ कुछ खोजना मुश्किल है।100% ऊंचाई में स्क्रॉलिंग सेल तालिका

मेरी समस्या यह है कि ब्राउज़र द्वारा स्वचालित सेल आकार बदलने के कारण मुझे 100% ऊंचाई तालिका लेआउट की आवश्यकता है, जिसे मैं स्पष्ट कारणों से स्वयं स्क्रिप्ट नहीं करना चाहता हूं।

यह अन्य "100% समस्याओं" से अलग है, जिसमें मुझे शीर्ष पर चिपकने के लिए कुछ कोशिकाओं की आवश्यकता होती है और कुछ नीचे की ओर, और मध्य स्थान को शेष स्थान भरने के लिए ब्राउज़र द्वारा आकार बदल दिया जाता है।

इस तरह के काम, समस्या तब होती है जब मुझे उस मध्य भाग की आवश्यकता होती है जिसमें अतिप्रवाह सामग्री होती है, और जाहिर है कि मैं ओवरफ्लो चाहता हूं: उस सामान के माध्यम से उपयोगकर्ता को सक्षम करने के लिए ऑटो। यह फ़ायरफ़ॉक्स में वेबकिट में काम करता है, ऐसा नहीं करता है, दूसरों ने परीक्षण नहीं किया है। यहां टेस्ट केस है।

<html> 
<head> 
    <style> 

     body, html { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     table { 
      height: 100%; 
      width: 200px; 
      border: 0; 
     } 

     .fill { 
      background-color: red; 
     } 

     .cont { 
      overflow: auto; 
      height: 100%; 
     } 

    </style> 

</head> 
<body> 
    <table> 
     <tr> 
      <td style="height:50px"></td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
     <tr> 
      <td class="fill"> 
       <div class="cont"> 
        An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
    </table> 
</body>

स्रोत

2009-10-19 skrat

मैं आप अपने प्रश्न अलग तरीके से व्यक्त करने की जरूरत है लगता है। फिलहाल ऐसा लगता है जैसे आप कह रहे हैं, "मैं एक्स प्राप्त करना चाहता हूं, इसलिए मुझे वाई का उपयोग करना होगा .. मैं वाई कैसे काम कर सकता हूं?" मुझे लगता है कि आपको पूछना चाहिए "मैं एक्स प्राप्त करना चाहता हूं .. मेरा लक्ष्य प्राप्त करने का सबसे अच्छा तरीका क्या है"। – codeinthehole

कई सालों बाद और यह अभी भी हल नहीं हुआ है :( – stej

-2

मुझे यकीन है कि मैं समझता हूँ कि तुम क्यों एक मेज उपयोग करने की आवश्यकता नहीं कर रहा हूँ। यदि आपका लक्ष्य केवल एक लेआउट बनाने के लिए है जो हमेशा ब्राउज़र विंडो की पूरी ऊंचाई को फैलाता है जब मध्य में सामग्री छोटी होती है और सामग्री बढ़ने पर लंबवत समायोजित होती है, तो सीएसएस आपको बस चाहिए।

<html> 

<head> 
<style> 

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    height:100%; /* Necessary for IE 
    position:relative; 
    background-color: red; /* Set equal to background-color of #body. This creates the illusion that your middle content spans the entire height of the page */ 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
    background-color: red; /* Set equal to background-color of #container */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

</style> 
</head> 

<body> 

<div id ="container"> 
    <div id="header"></div> 
    <div id="body"> 
    This is resizable. 
    </div> 
    <div id="footer"></div> 
</div> 

</body> 

</html>

इसे कैसे करना के लिए Refer to this guide (सभी मैंने किया था संपादित कंटेनर और शरीर divs की पृष्ठभूमि रंग भ्रम है कि बीच सामग्री 100% ऊंचाई तक फैला बनाने के लिए किया गया था। सीएसएस चौड़ाई, आदि को समायोजित ... अपने लेआउट फिट करने के लिए)।

स्रोत

2010-01-17 15:36:54 Choy

मैं सिर्फ यह आज की तरह एक सवाल के जवाब दिए और मेरा मानना है कि आप एक ही बात के लिए देख रहे हैं, here सवाल ही है और मेरे जवाब है:

एचटीएमएल

<div class="container"> 
    <div class="twenty"> 
     fixed height 20 
    </div> 
    <div class="fifty"> 
     fixed height 50 
    </div> 
    <div class="hundred"> 
     fixed height 100 
    </div> 
    <div class="auto"> 
     <div class="content"> 
      .... 
     </div> 
    </div> 
    <div class="fifty" style="border-bottom:none; border-top:1px solid"> 
     fixed height 50 
    </div> 
</div>

सीएसएस

html,body { 
    height:100%; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

.container { 
    width:100%; 
    height:100%; 
} 

.twenty, .fifty, .hundred, .auto { 
    border-bottom:1px solid black; 
} 

.twenty { 
    height:20px; 
} 

.fifty { 
    height:50px; 
} 

.hundred { 
    height:100px; 
} 

.auto { 
    height:100%; 
    overflow:hidden; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
    margin:-120px 0; 
    padding:120px 0; 
} 

.content { 
    float:left; 
    overflow:auto; 
    height:100%; 
} 

.content{ 
    width:100%; 
}

पूर्ण दृश्य: http://jsfiddle.net/8abeU/show/ फिडल: http://jsfiddle.net/8abeU

स्रोत

2012-01-12 02:36:05

काम करता है, दुर्भाग्यवश मेरा ऐप 90 के दशक (क्विर्क मोड आईई 8) में फंस गया है और इसलिए यह अपेक्षित व्यवहार नहीं करता है। –

100% ऊंचाई में स्क्रॉलिंग सेल तालिका

उत्तर

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