100% ন্যূনতম উচ্চতা সিএসএস লেআউট

Question

ব্রাউজারগুলির বিস্তৃত জুড়ে 100% ন্যূনতম উচ্চতার উপাদান তৈরি করার সর্বোত্তম উপায় কী?

বিশেষত যদি আপনার একটি headerএবং footerস্থির একটি লেআউট থাকে height,

আপনি মধ্যম কন্টেন্টটিকে নীচের অংশের 100%সাথে footerস্থির অংশটি কীভাবে পূরণ করবেন ?

Comments

আপনি বিবেচনা করতে পারে min-height: 100vh;। এটি স্ক্রিনের আকারের চেয়ে উচ্চতা সমান বা বৃহত্তর সেট করে vh: vertical height। আরও জন্য: w3schools.com/cssref/css_units.asp ।

— স্ট্যানিস্লাভ

শুধু একটি শোধন হিসাবে, vhঘোরা viewport heightএবং যাতে আপনি ব্যবহার করতে পারেন vwজন্য viewport widthএবং vmin, যেটা মাত্রা জন্য সবচেয়ে ছোট viewport minimum।

— আইওপেনার

এই সমাধানটি অ্যান্ড্রয়েডের জন্য ক্রোমে অবাঞ্ছিত ফলাফল দেবে (সাফারির মতো অন্যান্য মোবাইল ব্রাউজারগুলিতে পরীক্ষা করতে হবে) কারণ 100 ভিএইচ 100% এর মতো হবে না। প্রকৃতপক্ষে, উচ্চতা 100% স্ক্রিনের শীর্ষে অ্যাড্রেস বারের বিয়োগের উচ্চতার সাথে সমান, তবে 100vh অ্যাড্রেস বার ছাড়াই পর্দার উচ্চতার সাথে মিল রয়েছে। সুতরাং 100vh ব্যবহার অ্যান্ড্রয়েডের জন্য ক্রোমে কাজ করবে না। আপনার পাদচরণটি ব্রাউজারের ঠিকানা বারের উচ্চতার সাথে উচ্চতার সাথে মিলিয়ে ভাঁজের নীচে হবে।

— sboisse

আপনি এটি ফ্লেক্সবক্সের মাধ্যমে অর্জন করতে পারেন। উদাহরণ দেখুন ।

— রেজি পিঙ্কহাম

এখন একটি দিনের 100vh 'যাদুমন্ত্র মত কাজ করে

— Awais

Answer 1

আমি নিম্নলিখিতটি ব্যবহার করছি: সিএসএস লেআউট - 100% উচ্চতা

ন্যূনতম উচ্চতা

এই পৃষ্ঠার # কনটেইনার উপাদানটির ন্যূনতম উচ্চতা 100% রয়েছে। এইভাবে, যদি সামগ্রীটি ভিউপোর্টের সরবরাহের চেয়ে আরও বেশি উচ্চতার প্রয়োজন হয়, তবে # কনটেন্টের উচ্চতা # কনটেনারকে আরও দীর্ঘতর হতে বাধ্য করে। # কনটেন্টে সম্ভাব্য কলামগুলি তখন # কন্টেইনারটিতে একটি পটভূমি চিত্রের সাথে ভিজ্যুয়ালাইজ করা যায়; ডিভিডগুলি কোনও টেবিল কোষ নয় এবং এমন ভিজ্যুয়াল এফেক্ট তৈরি করার জন্য আপনার শারীরিক উপাদানগুলির প্রয়োজন (বা চান না)। আপনি যদি এখনও নিশ্চিত না হন; সোজা লাইন এবং সাধারণ রঙীন স্কিমগুলির পরিবর্তে ভবঘুরে লাইন এবং গ্রেডিয়েন্টগুলি ভাবেন।

আপেক্ষিক অবস্থান

যেহেতু # কনটেনারের আপেক্ষিক অবস্থান রয়েছে, তাই # ফুটার সর্বদা এর নীচে থাকবে; যেহেতু উপরে উল্লিখিত ন্যূনতম উচ্চতা # কনটেনারকে স্কেলিং থেকে রোধ করে না তাই এটি কার্যকর হবে (বা বিশেষত বিশেষত যখন) # বিষয়বস্তু # কনটেন্টারকে দীর্ঘতর হতে বাধ্য করে।

প্যাডিং-নীচে

যেহেতু এটি আর স্বাভাবিক প্রবাহে নেই, তাই # কনটেন্টের প্যাডিং-নীচে এখন নিখুঁত # ফুটারের জন্য স্থান সরবরাহ করে। এই প্যাডিংটি ডিফল্টরূপে স্ক্রলড উচ্চতায় অন্তর্ভুক্ত করা হয়েছে, যাতে ফুটারটি উপরের সামগ্রীটি কখনই ওভারল্যাপ করতে পারে না।

এই লেআউটটি পরীক্ষা করতে পাঠ্যের আকারটিকে কিছুটা স্কেল করুন বা আপনার ব্রাউজার উইন্ডোটির আকার পরিবর্তন করুন।

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

আমার জন্য ভাল কাজ করে।

Comments

সেই উদাহরণে আই 7 তে ফন্টের আকার (Ctrl + "+") বাড়াতে চেষ্টা করে এবং সেই স্টিকি ফুটারটি নষ্ট করে দিয়েছে :(

— ভিটালি

এটি এক আই 9 তে কাজ করছে বলে মনে হচ্ছে না ... এটি কি অন্য আইইগুলিতে কাজ করে?

— উইলিয়াম নিু

Answer 2

কোথাও লক করা একটি কাস্টম উচ্চতা সেট করতে:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

Answer 3

উপর ভিত্তি করে এখানে আরও একটি সমাধান দেওয়া হয়েছে vh, বা viewpoint height, বিশদগুলির জন্য সিএসএস ইউনিটগুলি দেখুন । এটি এই সমাধানের উপর ভিত্তি করে তৈরি করা হয়েছে যা পরিবর্তে ফ্লেক্স ব্যবহার করে।

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

ইউনিটগুলি vw, vh, vmax, vmin। মূলত, প্রতিটি ইউনিট ভিউপোর্ট আকারের 1% এর সমান। সুতরাং, ভিউপোর্টটি পরিবর্তন হওয়ার সাথে সাথে ব্রাউজারটি সেই মানটি গণনা করে এবং সেই অনুযায়ী সামঞ্জস্য করে।

আপনি এখানে আরও তথ্য পেতে পারেন :

বিশেষ করে:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

Answer 4

kleolb02 এর উত্তর দেখতে বেশ সুন্দর দেখাচ্ছে। অন্য উপায়টি স্টিকি ফুটার এবং ন্যূন-উচ্চতা হ্যাকের সংমিশ্রণ হবে

Answer 5

min-heightশতাংশের সাথে সঠিকভাবে কাজ করার জন্য , প্যারেন্ট নোডের উত্তরাধিকার সূত্রে min-height, কৌশলটি প্যারেন্ট নোডের উচ্চতা সেট করা 1pxএবং তারপরে সন্তানের min-heightসঠিকভাবে কাজ করবে।

ডেমো পৃষ্ঠা

Comments

গুড কিন্তু যদি ডেমো মধ্যে div বিষয়বস্তু ব্রাউজার উইন্ডোতে চেয়ে বেশি উচ্চতা আছে, পটভূমি স্ক্রোল পর কাটা হবে নিচে

— fider

@ ফাইডার - দয়া করে আপনার উল্লেখ করা সমস্যাটি দেখানোর জন্য একটি খেলার মাঠ সরবরাহ করুন।

— vsync

jsbin.com/nixuf/1/edit scrol down। আমি এতে দরকারী তথ্য পেয়েছি নীচের পোস্টে

— fider

Answer 6

একটি খাঁটি CSSসমাধান ( #content { min-height: 100%; }) প্রচুর ক্ষেত্রে কার্যকর হবে তবে সেগুলির মধ্যে নয় - বিশেষত আই 6 এবং আই 7।

দুর্ভাগ্যক্রমে, পছন্দসই আচরণ পেতে আপনার একটি জাভাস্ক্রিপ্ট সমাধান সমাধান করতে হবে। এটি আপনার সামগ্রীর জন্য পছন্দসই উচ্চতা গণনা করে <div>এবং কোনও কার্যক্রমে এটি একটি CSS সম্পত্তি হিসাবে সেট করে করা যেতে পারে:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

তারপরে আপনি এই ফাংশনটিকে হ্যান্ডলার onLoadএবং onResizeইভেন্টগুলির জন্য সেট করতে পারেন :

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

Answer 7

আমি লেভিকের সাথে একমত হয়েছি কারণ পিতামাতার ধারকটি 100% এ সেট করা আছে যদি আপনার সাইডবার থাকে এবং তারা চান যে তারা পাদলেখের সাথে পূরণের জন্য জায়গাটি পূরণ করতে পারে তবে আপনি তাদের 100% এ সেট করতে পারবেন না কারণ তারা প্যারেন্টের উচ্চতার 100 শতাংশ হবে এর অর্থ ফুটারটি ক্লিয়ার ফাংশনটি ব্যবহার করার সময় নিচে চাপ দেওয়া শেষ করে।

আপনার হেডারটিকে যদি 50px উচ্চতা বলা হয় এবং আপনার পাদচরণটি 50px উচ্চতা হয় এবং বিষয়বস্তুটি কেবলমাত্র অবশিষ্ট জায়গায় 100px বলে স্বনির্ধারণ করা হয় এবং পৃষ্ঠার ধারক এই মানটির 100% হয় তবে এর উচ্চতা 200px হবে। তারপরে আপনি যখন সাইডবারের উচ্চতাটি 100% এ সেট করেন তখন এটি 200px হয় যদিও শিরোনাম এবং পাদলেখের মধ্যে স্নাগ লাগানোর কথা মনে করা হয়। পরিবর্তে এটি 50px + 200px + 50px হিসাবে শেষ হয় তাই পৃষ্ঠাটি এখন 300px কারণ সাইডবারগুলি পৃষ্ঠার ধারক হিসাবে একই উচ্চতায় সেট করা আছে। পৃষ্ঠার বিষয়বস্তুগুলিতে একটি বড় সাদা স্থান থাকবে।

আমি ইন্টারনেট এক্সপ্লোরার 9 ব্যবহার করছি এবং এই 100% পদ্ধতিটি ব্যবহার করার সময় আমি এটির ফলস্বরূপ পাচ্ছি। আমি এটি অন্য ব্রাউজারগুলিতে চেষ্টা করে দেখিনি এবং আমি ধরে নিয়েছি এটি অন্য কয়েকটি বিকল্পে কাজ করতে পারে। তবে এটি সর্বজনীন হবে না।

Answer 8

সর্বপ্রথম আপনাকে তৈরি করা উচিত divসঙ্গে id='footer'আপনার পর contentDIV আছে এবং তারপর কেবল এই কাজ।

আপনার এইচটিএমএল দেখতে এটি দেখতে হবে:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

এবং সিএসএস:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Answer 9

সম্ভবত সবচেয়ে সংক্ষিপ্ত সমাধান (শুধুমাত্র আধুনিক ব্রাউজারগুলিতে কাজ করে)

সিএসএসের এই ছোট্ট অংশটি করে "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

একমাত্র প্রয়োজন হ'ল আপনার একটি নির্দিষ্ট উচ্চতার ফুটার থাকা দরকার।

এই লেআউটটির উদাহরণস্বরূপ:

<html><head></head><body>
  <main> your main content </main>
  </footer> your footer content </footer>
</body></html>

আপনার এই সিএসএস দরকার:

html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }

Answer 10

এটা চেষ্টা কর:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

divবিষয়বস্তু DIV আছে নিচে উপাদান থাকতে হবে clear:both।

Answer 11

আপনি এটি চেষ্টা করতে পারেন: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ এটি 100% উচ্চতা এবং অনুভূমিক কেন্দ্র।

Answer 12

আমি যা ব্যবহার করেছি তা ভাগ করুন এবং দুর্দান্তভাবে কাজ করুন

#content{
        height: auto;
        min-height:350px;
}

Answer 13

আফশিন মেহরাবানীর উত্তরে উল্লিখিত হিসাবে, আপনার শরীর এবং এইচটিএমএল এর উচ্চতা 100% এ সেট করা উচিত, তবে সেখানে পাদলেখ পেতে, মোড়কের উচ্চতার গণনা করুন:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}