css - form - html table generator




একটি ডিভি অবশিষ্ট পর্দা স্থান উচ্চতা পূরণ করুন (20)

আমি বর্তমানে ওয়েব অ্যাপ্লিকেশনে কাজ করছি, যেখানে আমি সামগ্রীটি সমগ্র স্ক্রীনের উচ্চতা পূরণ করতে চাই।

পৃষ্ঠায় একটি শিরোনাম রয়েছে, যা একটি লোগো এবং অ্যাকাউন্ট তথ্য রয়েছে। এটি একটি ইচ্ছাকৃত উচ্চতা হতে পারে। আমি বিষয়বস্তু বিভাগটি নীচের অংশে বাকি পৃষ্ঠাটি পূরণ করতে চাই।

আমি একটি হেডার div এবং একটি কন্টেন্ট div । এই মুহূর্তে আমি লেআউটের জন্য একটি টেবিল ব্যবহার করছি:

সিএসএস এবং এইচটিএমএল

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

পৃষ্ঠার সম্পূর্ণ উচ্চতা ভরাট করা হয়েছে এবং কোনও স্ক্রোলিং প্রয়োজন নেই।

বিষয়বস্তু div ভিতরে কিছু জন্য, top: 0; সেটিং top: 0; শিরোলেখ নীচে ডান এটি করা হবে। কখনও কখনও বিষয়বস্তুটি একটি প্রকৃত টেবিল হবে, এটির উচ্চতা 100% পর্যন্ত সেট হবে। content ভিতরে header এই কাজ করতে অনুমতি দেবে না।

table ব্যবহার ছাড়া একই প্রভাব অর্জন করার একটি উপায় আছে কি?

হালনাগাদ:

বিষয়বস্তু div অভ্যন্তরে উপাদানগুলির উচ্চতা শতাংশ হিসাবে সেট করা হবে। সুতরাং div ভিতরে 100% এ কিছু নীচে এটি পূরণ করা হবে। 50% এ দুটি উপাদান হবে।

আপডেট 2:

উদাহরণস্বরূপ, যদি হেডারটি ২0% স্ক্রীনের উচ্চতা #content তবে #content 50% এ নির্দিষ্ট একটি টেবিলের পর্দা স্থান 40% নেবে। এখন পর্যন্ত, একটি টেবিলের মধ্যে পুরো জিনিস মোড়ানো শুধুমাত্র কাজ করে।


Disclaimer: গ্রহণযোগ্য উত্তরটি সমাধানটির ধারণা দেয়, তবে আমি এটি অপ্রয়োজনীয় মোড়ক এবং CSS বিধিগুলির সাথে একটু ফুটো হয়েছি। নীচে খুব কম CSS নিয়ম সঙ্গে একটি সমাধান।

এইচটিএমএল 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

সিএসএস

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

উপরের সমাধানটি ভিউপোর্ট ইউনিট এবং http://caniuse.com/#feat=flexbox ব্যবহার করে এবং তাই IE10 + ব্যবহার করে, যা আপনাকে IE10 এর পুরানো সিনট্যাক্স সরবরাহ করে।

Codepen সঙ্গে খেলা: codepen লিঙ্ক

অথবা এটির জন্য, প্রধান পাত্রে প্রয়োজনীয় সামগ্রীর ক্ষেত্রে স্ক্রোলযোগ্য হওয়া দরকার: কোডপেন লিঙ্ক


সিএসএস শুধুমাত্র পদ্ধতি (উচ্চতা পরিচিত / নির্দিষ্ট করা হয়)

যখন আপনি মধ্যম উপাদানটিকে পুরো পৃষ্ঠায় উল্লম্বভাবে প্রসারিত করতে চান, তখন আপনি calc() ব্যবহার করতে পারেন যা CSS3 এ উপস্থাপিত হয়।

আমরা একটি নির্দিষ্ট উচ্চতা header এবং footer উপাদান আছে অনুমান করা এবং আমরা section ট্যাগ সম্পূর্ণ উপলব্ধ উল্লম্ব উচ্চতা নিতে চান ...

Demo

Assumed মার্কআপ

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

সুতরাং আপনার সিএসএস হতে হবে

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

তাই এখানে, কি করছেন তা হল, উপাদানগুলির উচ্চতা যোগ করা এবং calc() ফাংশন ব্যবহার করে 100% থেকে কমে যাওয়া ছাড়াই।

আপনি height: 100%; ব্যবহার নিশ্চিত করুন height: 100%; পিতামাতার উপাদান জন্য।



আপনি আসলে দুটি উপাদান (শিরোনাম এবং সামগ্রী) ভাগ করতে display: table ব্যবহার করতে পারেন, যেখানে শিরোনাম উচ্চতায় পরিবর্তিত হতে পারে এবং সামগ্রী অবশিষ্ট স্থানটি পূরণ করে। এটি পুরো পৃষ্ঠার সাথে কাজ করে, সেইসাথে এলাকাটি কেবলমাত্র অন্য কোনও উপাদানটির বিষয়বস্তু, relative , absolute বা fixed position সেট অবস্থানের সাথে position করে। এটি যতক্ষণ পর্যন্ত অভিভাবক উপাদানটি একটি অ-শূন্য উচ্চতা হিসাবে কাজ করবে।

এই উষ্ণ এবং নীচের কোড দেখুন:

সিএসএস:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

এইচটিএমএল:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

আপনি যদি পুরানো ব্রাউজারগুলি সমর্থন করতে না পারার সাথে মোকাবিলা করতে পারেন (অর্থাৎ, MSIE 9 বা তার বেশি বয়সী), আপনি এটিকে http://caniuse.com/#feat=flexbox সহ করতে পারেন যা ইতিমধ্যে W3C সিআর। যে মডিউল অন্যান্য চমৎকার কৌশল, খুব, যেমন বিষয়বস্তু পুনরায় আদেশ হিসাবে পারবেন।

দুর্ভাগ্যবশত, MSIE 9 বা তার কমই এটি সমর্থন করে না এবং আপনাকে ফায়ারফক্স ছাড়া অন্য ব্রাউজারের জন্য CSS সম্পত্তিটির জন্য বিক্রেতা উপসর্গটি ব্যবহার করতে হবে। আশা করি অন্যান্য বিক্রেতা খুব শীঘ্রই উপসর্গ ড্রপ।

অন্য একটি পছন্দ CSS গ্রিড লেআউট হতে পারে তবে এটি ব্রাউজারগুলির স্থিতিশীল সংস্করণগুলির থেকেও কম সমর্থন দেয়। অনুশীলনে, শুধুমাত্র MSIE 10 সমর্থন করে।


আমার জন্য কি কাজ করে (অন্য ডিভিএর মধ্যে একটি div এবং আমি অন্য সব পরিস্থিতিতে অনুমান) নীচে প্যাডিং 100% সেট করা হয়। যে, আপনার CSS / স্টাইলশীট এই যোগ করুন:

padding-bottom: 100%;

আমি পাশাপাশি এই জন্য একটি উত্তর অনুসন্ধান করা হয়েছে। যদি আপনি IE8 এবং উপরে লক্ষ্য করতে সক্ষম সৌভাগ্যবান হন তবে আপনি ডিভি সহ ব্লক-লেভেল উপাদানের সাথে টেবিলগুলির রেন্ডারিং নিয়মগুলি পেতে display:table এবং সম্পর্কিত মানগুলি ব্যবহার করতে পারেন।

আপনি এমনকি ভাগ্যবান এবং আপনার ব্যবহারকারীরা শীর্ষ-স্তরের ব্রাউজারগুলি ব্যবহার করছেন (উদাহরণস্বরূপ, এটি যদি আপনার কম্পিউটারে নিয়ন্ত্রণ করা একটি ইন্ট্রানেট অ্যাপ্লিকেশন হয় তবে আমার সর্বশেষ প্রকল্পটি যেমন), আপনি CSS3 এ নতুন নমনীয় বক্স লেআউট ব্যবহার করতে পারেন!


এখন উত্তর একটি টন আছে, কিন্তু আমি উচ্চতা ব্যবহার করে পাওয়া যায়: 100vh; উপলব্ধ সম্পূর্ণ উল্লম্ব স্থান পূরণ করতে প্রয়োজন যে ডিভ উপাদান কাজ।

এইভাবে, আমি প্রদর্শন বা পজিশনিং সঙ্গে প্রায় খেলা প্রয়োজন হবে না। বুটস্ট্র্যাপ ব্যবহার করার সময় এটি একটি ড্যাশবোর্ড তৈরির কাজে ব্যবহৃত হয়েছিল যেখানে আমার একটি সাইডবার এবং একটি প্রধান ছিল। আমি পুরো পটভূমি স্থান প্রসারিত এবং পূরণ করতে চেয়েছিলেন যাতে আমি একটি পটভূমি রঙ প্রয়োগ করতে পারে।

div {
    height: 100vh;
}

IE9 এবং আপ সমর্থন করে: লিঙ্ক দেখতে ক্লিক করুন


কেন শুধু এই মত?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

আপনি এইচটিএমএল এবং শরীরের (যে ক্রম) একটি উচ্চতা এবং তারপর আপনার উপাদান একটি উচ্চতা দিতে?

আমার জন্য কাজ কর


ব্যবহৃত: height: calc(100vh - 110px);

কোড:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>


মার্কআপে টেবিল ব্যবহার করার পরিবর্তে, আপনি CSS টেবিলগুলি ব্যবহার করতে পারেন।

মার্কআপ

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(প্রাসঙ্গিক) সিএসএস

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 এবং FIDDLE2

এই পদ্ধতির কিছু সুবিধা রয়েছে:

1) কম মার্কআপ

2) মার্কআপ টেবিলের তুলনায় আরো অর্থবহ, কারণ এটি ট্যাবুলার ডেটা নয়।

3) ব্রাউজার সমর্থন খুব ভাল : IE8 +, সকল আধুনিক ব্রাউজার এবং মোবাইল ডিভাইস ( caniuse )

শুধু সম্পূর্ণতার জন্য, এখানে CSS টেবিলের মডেলের জন্য CSS বৈশিষ্ট্যের সমতুল্য HTML উপাদানগুলি রয়েছে

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

মূল পোস্টটি 3 বছরেরও বেশি আগে। আমি মনে করি অনেক লোক যারা আমার মত এই পোস্টে আসে তারা অ্যাপ-লেআউট সমাধানের সন্ধান করছে, কোনওভাবে নির্দিষ্ট শিরোনাম, ফুটার এবং সম্পূর্ণ উচ্চতা সামগ্রী বিশ্রাম পর্দায় গ্রহণ করে বলে। যদি তাই হয়, এই পোস্ট সাহায্য করতে পারে, এটি IE7 +, ইত্যাদি কাজ করে।

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

এবং এখানে সেই পোস্ট থেকে কিছু স্নিপেট রয়েছে:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>


সত্যিই একটি শব্দ নয়, CSS এ এটি করার জন্য ক্রস ব্রাউজার উপায়। আপনার লেআউটটিকে জটিলতাগুলি মনে করে, আপনাকে উপাদানটির উচ্চতা সেট করতে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে। আপনি কি করতে হবে তা সারাংশ:

Element Height = Viewport height - element.offset.top - desired bottom margin

একবার আপনি এই মানটি পেতে এবং উপাদানটির উচ্চতা সেট করতে গেলে, আপনাকে উইন্ডো হ্যান্ডলারগুলি উভয় উইন্ডোতে লোড এবং অ্যান্রিসাইজ করতে হবে যাতে আপনি আপনার আকারের ফাংশনটি ফায়ার করতে পারেন।

এছাড়াও, আপনার সামগ্রীটি ভিউপোর্টের চেয়ে বড় হতে পারে বলে মনে হচ্ছে, আপনাকে স্ক্রোল করতে ওভারফ্লো-ই সেট করতে হবে।


সিএসএস গ্রিড সমাধান

শুধু display:grid সঙ্গে body সংজ্ঞায়িত display:grid এবং grid-template-rows auto এবং fr মান সম্পত্তি ব্যবহার করে।

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

@ সিএসএস-Tricks.com গ্রিডের একটি সম্পূর্ণ গাইড


এটা চেষ্টা কর

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

এটি গতিশীল ক্যালকটি জাভাস্ক্রিপ্ট ব্যবহার করে, রাইনিং স্ক্রীন স্পেস।

আপনি সিএসএস-ইন-জেএস প্রযুক্তি ব্যবহার করতে পারেন, যেমন নীচের লিব:

https://github.com/cssobj/cssobj

ডেমো: https://cssobj.github.io/cssobj-demo/


মোবাইল অ্যাপের জন্য আমি শুধুমাত্র ভিএইচ এবং ভিডাব্লু ব্যবহার করি

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

ডেমো - https://jsfiddle.net/u763ck92/


জাভাস্ক্রিপ্ট ব্যবহারের সাথে সাথে এটি আমার জন্য অন্য কোন উপায়ে কাজ করে নি, যেমন NICCAI প্রথম প্রশ্নের উত্তর দেয়। আমি <div>গুগল ম্যাপস দিয়ে রিসেল করার জন্য সেই পদ্ধতি ব্যবহার করছি ।

এখানে কিভাবে সম্পূর্ণ উদাহরণ দেওয়া হল (Safari / FireFox / IE / আইফোন / অ্যানডোরড (ঘূর্ণন সহ কাজ করে) কাজ করে):

সিএসএস

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

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

জাতীয়

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

এইচটিএমএল

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>

আমি একটি সহজ সমাধান খুঁজে পাওয়া যায় নি, কারণ আমার জন্য এটি একটি নকশা সমস্যা ছিল। আমি লাল পাতা নীচের সাদা সাদা হতে না বাকি চেয়েছিলেন। তাই আমি পৃষ্ঠাগুলি পটভূমি রঙ লাল সেট। এবং উপাদান ব্যাকগ্রাউন্ড রং সাদা। বিষয়বস্তু উচ্চতা যেমন সেট সঙ্গে। 20em বা 50% প্রায় খালি পৃষ্ঠাটি পুরো পৃষ্ঠাটিকে লাল না করে।


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

সমস্ত সেনে ব্রাউজারে, আপনি সামগ্রীটির আগে "শিরোনাম" ডিভিকে রাখতে পারেন, ভাইবোন হিসাবে এবং একই CSS কাজ করবে। যাইহোক, IE7- উক্ত ক্ষেত্রে ফ্লোট 100% হলে সঠিকভাবে উচ্চতাটি ব্যাখ্যা করে না, তাই শিরোনাম উপরের হিসাবে সামগ্রীতে থাকা প্রয়োজন। ওভারফ্লো: অটো IE তে ডবল স্ক্রোল বারগুলি তৈরি করবে (যা সর্বদা ভিউপোর্ট স্ক্রলবার দৃশ্যমান, কিন্তু নিষ্ক্রিয় থাকে), তবে এটি ছাড়া, সামগ্রীটি যদি ওভারফ্লো হয় তবে তা ক্লিপ করবে।





html-table