प्रौद्योगिकी साझेदारी

[Learning css2] grid layout-पृष्ठस्य पादभागः जालपुटस्य अधः स्थापितः भवति

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

यदा मध्यसामग्रीणां ऊर्ध्वता पृष्ठस्य समर्थनार्थं स्क्रीनस्य ऊर्ध्वता पर्याप्तं न भवति तदा पृष्ठस्य पादभागं पृष्ठस्य पादभागे (अधः) कथं स्थापयितव्यम्

1. प्रथमं उपरि चित्रे प्रदर्शनप्रभावं पश्यन्तु ।

2. स्रोतसङ्केतं प्रदातव्यम्

२.१, html भागः

  1. <body>
  2.   <header>头部</header>
  3.   <main>主区域</main>
  4.   <footer>底部</footer>
  5. </body>

२.२, css भागः

  1. <style>
  2.     html, body {
  3.       margin: 0;
  4.       padding: 0;
  5.       width: 100%;
  6.       height: 100%;
  7.     }
  8.     body {
  9.       min-height: 100vh;
  10.       display: grid;
  11.       grid-template-rows: auto 1fr auto;
  12.     }
  13.  
  14.     header {
  15.       background: aquamarine;
  16.       height: 40px;
  17.       line-height: 40px;
  18.       text-align: center;
  19.     }
  20.  
  21.     footer {
  22.       background: aquamarine;
  23.       height: 50px;
  24.       line-height: 50px;
  25.       text-align: center;
  26.     }
  27.  
  28.     main {
  29.       margin: 0 auto;
  30.       background: aqua;
  31.       width: 80%;
  32.     }
  33.   </style>

3. सर्वे कोडाः

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>gridbox布局</title>
  6.   <style>
  7.     html, body {
  8.       margin: 0;
  9.       padding: 0;
  10.       width: 100%;
  11.       height: 100%;
  12.     }
  13.     body {
  14.       min-height: 100vh;
  15.       display: grid;
  16.       grid-template-rows: auto 1fr auto;
  17.     }
  18.  
  19.     header {
  20.       background: aquamarine;
  21.       height: 40px;
  22.       line-height: 40px;
  23.       text-align: center;
  24.     }
  25.  
  26.     footer {
  27.       background: aquamarine;
  28.       height: 50px;
  29.       line-height: 50px;
  30.       text-align: center;
  31.     }
  32.  
  33.     main {
  34.       margin: 0 auto;
  35.       background: aqua;
  36.       width: 80%;
  37.     }
  38.   </style>
  39. </head>
  40. <body>
  41.   <header>头部</header>
  42.   <main>主区域</main>
  43.   <footer>底部</footer>
  44. </body>
  45. </html>

4. सिद्धान्तः

1.आरक्षितम्min-height: 100vhएषा पद्धतिः, परन्तु ततः वयं उपयुञ्ज्महेgrid-template-rowsअन्तरिक्षम् आगच्छतु।

2. अस्याः पद्धत्याः युक्तिः विशेषजालकोशिकानां उपयोगः अस्तिfr 。 fr "प्रतियाः" प्रतिनिधित्वं करोति तथा च तस्य उपयोगेन ब्राउजर् इत्यनेन अस्मिन् स्तम्भे अथवा पङ्क्तौ आवंटयितुं अवशिष्टस्य स्थानस्य उपलब्धानां "प्रतिकृतीनां" गणना आवश्यकी भवति । अस्मिन् सन्दर्भे एतत् शीर्षकस्य पादलेखस्य च मध्ये सर्वं उपलब्धं स्थानं पूरयति, यत् फ्लेक्सबॉक्स-पद्धतेः "दोषस्य" अपि समाधानं करोति, यत्र मुख्यक्षेत्रं स्वयमेव पूरयितुं न शक्यते

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति विकासक दस्तावेजीकरणस्थानकं भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु

मम सम्पर्कसूचना

मेल