मैं अपने Vuejs ऐप में टेलविंड का उपयोग कर रहा हूं। मेरे पास यह सरल टेम्पलेट है

<template>
  <div class="bg-gray-500 h-screen">
    <Header /><!-- //height 32 -->
    <div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
      <router-view />
    </div>
  </div>
</template>

h-screen वाला डिव रूट या माई ऐप है। घटक<header> की टेलविंड ऊंचाई h-32 है

समस्या यह है कि दूसरा div पृष्ठ को नीचे स्क्रॉल करने का कारण बनता है, <header> (h-32) की ऊंचाई।

मुझे क्या करने का मन है

यदि कोई सामग्री नहीं है, तो मैं चाहता हूं कि दूसरा div स्क्रीन की शेष ऊंचाई को भर दे लेकिन अब और नहीं। यदि सामग्री है, तो मैं चाहता हूं कि यह आवश्यकतानुसार बढ़े।

3
PrestonDocks 14 अगस्त 2020, 14:55

1 उत्तर

सबसे बढ़िया उत्तर

इसके लिए आप .flex, .flex-col और .flex-1 का लाभ उठा सकते हैं। दस्तावेज़ देखें।

<div class="bg-gray-500 flex flex-col h-screen">
  <div class="flex h-32 bg-gray-200"></div>
  <div class="flex-1 w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg bg-gray-300">
    <router-view />
  </div>
</div>
5
Digvijay 14 अगस्त 2020, 16:30