डिस्प्ले: टेबल-पंक्ति और ओवरफ़्लो: क्रोम, फ़ायरफ़ॉक्स (और आईई)

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

क्रोम में, यह व्यवहार कर रहा है जैसा कि यह होना चाहिए।

स्टैक ओवरव्लो पर this प्रश्न है, जो मेरी समस्या के समान लगता है, लेकिन कोई जवाब या नमूने दिए गए हैं।

मैंने जेएसबीन और फिडल में इसे पुन: उत्पन्न करने की कोशिश की है, लेकिन यह काम नहीं किया।

Chrome और Firefox मैं बनाया है दो screengrabs में व्यवहार को वर्णन करने के लिए:

मैं भी एक छोटे पैमाने पर एचटीएमएल उदाहरण, here पाया जा सकता है की स्थापना की है । आप क्रोम और फ़ायरफ़ॉक्स में वेबसाइट खोलकर पुन: उत्पन्न कर सकते हैं और नीचे के कंटेनर पृष्ठ को बहने तक टेक्स्टरेरा का विस्तार कर सकते हैं।

कोड

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
.tableWrapper { 
 
    display: table; 
 
    height: 100%; 
 
    background: darkgrey; 
 
    table-layout: fixed; 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 
.textArea { 
 
    background: #F9F9F9; 
 
    padding: 10px 10px 5px 10px; 
 
    margin: 10px; 
 
} 
 
.content { 
 
    display: table-row; 
 
    height: 100%; 
 
    margin: 10px; 
 
} 
 
.content div { 
 
    display: block; 
 
    overflow: auto; 
 
    height: calc(100% - 20px); 
 
    height: -webkit-calc(100% - 20px); 
 
    height: -moz-calc(100% - 20px); 
 
    background: #ADE6DF; 
 
    margin: 10px; 
 
} 
 
.content p { 
 
    background: white; 
 
    margin: 10px; 
 
    padding: 5px; 
 
}

<div class="tableWrapper"> 
 
    <div class="textArea"> 
 
    <textarea></textarea> 
 
    </div> 
 
    <div class="content"> 
 
    <div> 
 
     <p> 
 
     Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam 
 
     erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim 
 
     mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo 
 
     ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. 
 
     </p> 
 
     <p> 
 
     Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam 
 
     erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim 
 
     mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo 
 
     ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

यह बहुत निराशा होती है, मुझे आशा है कि किसी को जानता हो रहा है।

स्रोत

2016-02-19 Goombah

अगर यह सच है कि गुमनाम तालिका बक्से लेआउट एक साथ (.textArea एक में रहती है रखने के लिए जगह भर में उत्पन्न किया जा रहा है के साथ कुछ भी नहीं है मैं कुछ के लिए पता नहीं है .tableWrapper में अज्ञात तालिका-पंक्ति में अज्ञात तालिका-कक्ष, और .content div। अनाम में एक अनाम तालिका-कक्ष में रहता है)। – BoltClock

@ बोल्टक्लॉक क्या आपको पता है कि इसे कैसे ठीक किया जाए? –

@ पैट्रिक होफमैन: नहीं, दुख की बात है। – BoltClock

यदि आप फ्लेक्स के साथ ठीक कर रहे हैं, आप इसका इस्तेमाल हो सकता है: (https://jsfiddle.net/x59n7Lek/ - https://jsfiddle.net/x59n7Lek/1/)

* { 
 
    box-sizing: border-box; 
 
} 
 

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

 
.tableWrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    background: darkgrey; 
 
    table-layout: fixed; 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    max-width: 100%; 
 
    /*for the demo snippet */ 
 
    max-height: 100%; 
 
    /* maybe you still want to see the content if textarea is too big ? */ 
 
    overflow: auto; 
 
} 
 

 
.textArea { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
    background: #F9F9F9; 
 
    padding: 10px 10px 5px 10px; 
 
    margin: 10px; 
 
} 
 

 
textarea { 
 
    height: 100%; 
 
    /* optionnal */ 
 
} 
 

 
.content { 
 
    margin: 10px; 
 
    min-height: 220px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.content div { 
 
    flex: 1; 
 
    overflow: auto; 
 
    display: block; 
 
    background: #ADE6DF; 
 
    margin: 10px; 
 
} 
 

 
.content p, footer,header { 
 
    background: white; 
 
    margin: 10px; 
 
    padding: 5px; 
 
}

<div class="tableWrapper"> 
 
    <div class="textArea"> 
 
    <textarea></textarea> 
 
    </div> 
 
    <div class="content"> 
 
    <header>preview a bit small, test snippet in full page mode then resize window for behaviors</header> 
 
    <div> 
 
     <p> 
 
     Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam 
 
     erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim 
 
     mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo 
 
     ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. 
 
     </p> 
 
     <p> 
 
     Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam 
 
     erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim 
 
     mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo 
 
     ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. 
 
     </p> 
 
    </div> 
 
    <footer>footer</footer> 
 
    </div> 
 
</div>

स्रोत

2016-02-19 14:39:15

धन्यवाद! लेकिन बड़े पैमाने पर प्रोजेक्ट में, क्षैतिज स्क्रॉलिंग के साथ नीचे कंटेनर के अंदर एक टेबल होने जा रहा है। इस समाधान के साथ, आपको पहले क्षैतिज स्क्रॉल करने में सक्षम होने के लिए नीचे स्क्रॉल करना होगा। '.content div' में अतिप्रवाह होना चाहिए: ऑटो, नहीं '.content'। यदि यह व्यवहार फ्लेक्स के साथ संभव होगा, तो मैं सुन रहा हूँ! मेरा मतलब यह स्पष्ट करने के लिए कि मैं क्या चाहता हूं: यह: http://www.joshuahazelaar.nl/tablerow/1.png से http://www.joshuahazelaar.nl/tablerow/2.png – Goombah

@Goombah कंटेंट में एक शीर्षक और इम्ब्रिकेटेड फ्लेक्स को एक निचले स्तर के स्तर में जोड़ा गया है, यदि स्निपेट अपडेट देखें तो यह आपके अंतिम रिजल्ट को पूरा करता है। यकीन नहीं है कि मैंने समझ लिया कि आपने क्या देखा था। :) https://jsfiddle.net/x59n7Lek/ और एक पाद लेख के साथ खेलने के लिए एक पहेली भी https://jsfiddle.net/x59n7Lek/1/ –

यह चाल करने के लिए लगता है। उम्मीद है कि यह उपयोगी है।

\t html, 
 
\t body { 
 
\t \t height: 100%; 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t overflow: hidden; 
 
\t } 
 
\t .tableWrapper { 
 
\t \t display: table; 
 
\t \t height: 100%; 
 
\t \t background: darkgrey; 
 
\t \t table-layout: fixed; 
 
\t \t width: 800px; 
 
\t \t margin: 0 auto; 
 
\t } 
 

 
\t .content { 
 
\t \t display: table-row; 
 
\t \t height: 100%; 
 
\t } 
 

 
\t .content div { 
 
    display: block; 
 
    overflow: auto; 
 
\t \t /* 
 
\t \t \t height: calc(100% - 20px); 
 
\t \t \t height: -webkit-calc(100% - 20px); 
 
\t \t \t height: -moz-calc(100% - 20px); 
 
\t \t */ 
 
\t height: 100%; 
 
\t background: #ADE6DF; 
 
\t margin: 10px; 
 
\t max-height: 80vh; 
 
\t min-height: 80vh; 
 
\t overflow: auto; 
 
\t } 
 
\t .content p { 
 
\t \t background: white; 
 
\t \t margin: 10px; 
 
\t \t padding: 5px; 
 
\t } 
 
\t .textArea { 
 

 
\t } 
 
\t .content p, footer,header { 
 
\t \t background: white; 
 
\t \t margin: 10px; 
 
\t \t padding: 5px; 
 
\t }

\t <div class="tableWrapper"> 
 
\t \t <div class="textArea"> 
 
\t \t <textarea></textarea> 
 
\t \t </div> 
 
\t \t <div class="content"> 
 
\t \t \t <div> 
 
\t \t \t \t <header>preview a bit small, test snippet in full page mode then resize window for behaviors</header> 
 

 
\t \t \t \t \t <p> 
 
\t \t \t \t \t Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. 
 
\t \t \t \t \t </p> 
 
\t \t \t \t \t <p> 
 
\t \t \t \t \t Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. 
 
\t \t \t \t \t </p> 
 

 
\t \t </div> 
 
    <footer>footer</footer> 
 

 
\t </div> 
 

 
</div>

स्रोत

2016-02-29 07:03:33

डिस्प्ले: टेबल-पंक्ति और ओवरफ़्लो: क्रोम, फ़ायरफ़ॉक्स (और आईई)

उत्तर

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