এইচটিএমএল উপাদান কীভাবে কেবল সিএসএস ব্যবহার করে অবশিষ্ট পর্দার উচ্চতার 100% পূরণ করতে পারে?

118

আমার একটি শিরোনাম উপাদান এবং একটি সামগ্রী উপাদান রয়েছে:

#header
#content

আমি শিরোনামটি নির্দিষ্ট উচ্চতা এবং কনটেন্টের সাথে পর্দায় উপলব্ধ সমস্ত অবশিষ্ট উচ্চতা পূরণ করতে চাই overflow-y: scroll;।

এটি জাভাস্ক্রিপ্ট ছাড়া সম্ভব?

html css

— লুণ্ঠন করা
সূত্র

83

এর কৌশলটি এইচটিএমএল এবং শারীরিক উপাদানগুলিতে 100% উচ্চতা নির্দিষ্ট করে। কিছু ব্রাউজার উচ্চতা গণনা করতে প্যারেন্ট উপাদানগুলিতে (এইচটিএমএল, বডি) সন্ধান করে।

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

— BentOnCoding
সূত্র

1

আমি সব সমাধান চেষ্টা করেছিলেন কিন্তু শুধুমাত্র এই আমার সমস্যা সমাধান।

— অ্যালেক্স

1

@ অ্যালেক্স যদি আপনি যে সকল ব্রাউজারকে টার্গেট করছেন সেগুলির জন্য এটি কাজ করে, তবে যেকোন উপায়ে এগিয়ে যান এবং এটি প্রয়োগ করুন। প্রত্যেকের প্রয়োজনীয়তা আলাদা।

— বেন্টঅনকোডিং

319

সমস্ত উত্তরগুলি ভুলে যান, সিএসএসের এই লাইনটি আমার জন্য 2 সেকেন্ডে কাজ করেছিল:

height:100vh;

1vh ব্রাউজারের পর্দার উচ্চতার 1%

উৎস

প্রতিক্রিয়াশীল লেআউট স্কেলিংয়ের জন্য, আপনি এটি ব্যবহার করতে পারেন:

min-height: 100vh

[আপডেট নভেম্বর 2018] মন্তব্যে উল্লিখিত হিসাবে, ন্যূনতম উচ্চতা ব্যবহার করা পুনরায় নকশার বিষয়ে সমস্যা এড়াতে পারে

[আপডেট এপ্রিল 2018] মন্তব্যে যেমন উল্লেখ করা হয়েছে, ২০১১ সালে যখন প্রশ্ন জিজ্ঞাসা করা হয়েছিল, সমস্ত ব্রাউজারগুলি ভিউপোর্ট ইউনিটকে সমর্থন করে না। অন্য উত্তরগুলি তখন এর সমাধানগুলি ছিল - vmaxএখনও আইই তে সমর্থিত নয়, তাই এটি এখনও সবার জন্য সেরা সমাধান নাও হতে পারে।

— সেবাস্তিয়ান এইচ।
সূত্র

9

এটি সবচেয়ে সহজ উত্তর, যেহেতু আপনাকে সমস্ত অভিভাবক উপাদানগুলির উচ্চতা 100% এ সেট করার দরকার নেই। এখানে vh - caniuse.com/#feat=viewport-units- এর বর্তমান সমর্থন - আইওএসের সম্ভবত স্পষ্টতই প্রয়োজন হতে পারে, কারণ "আইওএসের উপর ভিএইচটি উচ্চতার গণনার নীচে সরঞ্জামদণ্ডের উচ্চতা অন্তর্ভুক্ত করার জন্য রিপোর্ট করা হয়েছে"।

— ব্রায়ান বার্নস

2

বাহ, সুন্দর সন্ধান! অতিরিক্ত জটিল উত্তর সহ এই সমস্ত লোককে দেখুন।

— NoName

8

২০১১ সালে যখন প্রশ্ন জিজ্ঞাসা করা হয়েছিল, তখন প্রধান ব্রাউজারগুলির কোনওই ভিউপোর্ট ইউনিটকে সমর্থন করে না। সেই "অতিরিক্ত জটিল উত্তরগুলি" তখন একমাত্র বিকল্প ছিল।

— জেজেজে

6

নাবালক পরামর্শ যে min-height: 100vhএকটি অনেক ভাল হবে। এটি প্রতিক্রিয়াশীল ডিজাইনের জন্যও স্কেল করবে।

— উইগি এ

3

এটি জিজ্ঞাসিত প্রশ্নের উত্তর দেয় না, এটি ভিউপোর্টের 100% গ্রহণ করবে। তিনি চান না যে এই শিরোনামটি ভিউপোর্টের x% গ্রহণ করবে, কারণ অন্যান্য উত্তরগুলি সঠিক।

— কোডি

35

আসলে সর্বোত্তম পন্থা হ'ল:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

এটি আমার জন্য সবকিছু সমাধান করে এবং এটি আমার পাদলেখ নিয়ন্ত্রণ করতে সহায়তা করে এবং পৃষ্ঠা নিচে স্ক্রল করা হচ্ছে না কেন এটি স্থির পাদলেখ থাকতে পারে।

প্রযুক্তিগত সমাধান - সম্পাদিত

Icallyতিহাসিকভাবে, 'উচ্চতা' সবচেয়ে সহজ 'প্রস্থের' সাথে তুলনা করে ছড়িয়ে ছিটিয়ে থাকা জিনিস। সিএসএস যেহেতু <body>স্টাইলিংয়ের জন্য ফোকাস করে । উপরের কোড - আমরা দিয়েছি <html>এবং <body>একটি উচ্চতা। এইখানেই যাদু ছবিতে আসে - যেহেতু প্লে টেবিলটিতে আমাদের 'ন্যূনতম উচ্চতা' রয়েছে, তাই আমরা ব্রাউজারকে বলছি যে <body>এর চেয়েও উচ্চতর <html>কারণ <body>ন্যূনতম উচ্চতা ধরে। এর ফলে, <body>ওভাররাইড করতে দেয় <html>কারণ <html>উচ্চতা ইতিমধ্যে ছিল। অন্য কথায়, আমরা <html>টেবিলটি বন্ধ "ব্রম্প" করতে ব্রাউজারটিকে ট্রিক করছি , যাতে আমরা স্বাধীনভাবে স্টাইল করতে পারি।

— Faron
সূত্র

1

হায় খোদা এটা একটা অলৌকিক ঘটনা!

— জিওফ

অলৌকিক মত, এটি কাজ করে! তবে দয়া করে: কেন min-heightএবং কেন height?

— জয়

1

@ শাওজিয়াংচাই - icallyতিহাসিকভাবে, 'উচ্চতা' সবচেয়ে সহজ 'প্রস্থের' সাথে তুলনা করে তৈরি করা কঠিন বিষয়। সিএসএস যেহেতু <body>স্টাইলিংয়ের জন্য ফোকাস করে । এই কোড: আমরা দিয়েছি <html>এবং <body>একটি উচ্চতা। এইখানেই যাদুটি ছবিতে আসে - যেহেতু প্লে টেবিলটিতে আমাদের 'ন্যূনতম উচ্চতা' রয়েছে, তাই আমরা সার্ভারকে বলছি যে <body>এর চেয়েও উচ্চতর <html>কারণ <body>ন্যূনতম উচ্চতা ধরে। এর ফলে, <body>ওভাররাইড করতে দেয় <html>কারণ <html>উচ্চতা ইতিমধ্যে ছিল। অন্য কথায়, আমরা <html>টেবিলের বাইরে "বাম্প" করতে সার্ভারটিকে ট্রিক করছি , যাতে আমরা স্বাধীনভাবে স্টাইল করতে পারি।

— ফারুন 29:25

2

@ ফ্যারন মনে হয় 'ব্রাউজার' এখানে 'সার্ভার' না দিয়ে আরও ভাল শব্দ পছন্দ হবে choice ;)

— এলইটি

@ ইউনলিম ... আমি কীভাবে এর সমাধানের জন্য সঠিক শব্দচয়নটি বেছে নিতে পারতাম তাতে আমি আপনার সাথে একমত। "কনুই-বাম্প" টিপসের জন্য ধন্যবাদ। সেই অনুসারে আমার উত্তর আপডেট করুন।

— ফারন

14

আপনি ন্যূনতম-উচ্চতার সম্পত্তিতে vh ব্যবহার করতে পারেন।

min-height: 100vh;

আপনি কীভাবে মার্জিনটি ব্যবহার করছেন তার উপর নির্ভর করে আপনি নীচের মতো কাজ করতে পারেন ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

— আলমেডা কাভালকান্তে
সূত্র

10

গৃহীত সমাধানটি আসলে কাজ করবে না। আপনি লক্ষ্য করবেন যে সামগ্রীটি divতার পিতামাতার উচ্চতার সমান হবে body। সুতরাং bodyউচ্চতা 100%নির্ধারণ করা এটি ব্রাউজার উইন্ডোর উচ্চতার সমান সেট করবে। ধরা যাক ব্রাউজার উইন্ডোটি 768pxউচ্চতায় ছিল , সামগ্রীটির divউচ্চতা সেট করে 100%, divএর উচ্চতা ঘুরে ফিরে আসবে 768px। সুতরাং, আপনি হেডার DIV আছে সত্তা দিয়ে শেষ হবে 150pxএবং কন্টেন্ট DIV আছে হচ্ছে 768px। শেষে আপনার 150pxপৃষ্ঠার নীচের অংশে লিখিত সামগ্রী থাকবে । অন্য সমাধানের জন্য, এই লিঙ্কটি দেখুন।

— dykstrad
সূত্র

8

এইচটিএমএল 5 দিয়ে আপনি এটি করতে পারেন:

সিএসএস:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

এইচটিএমএল:

<header>blabablalba </header>
<section> Content </section>

— মিগুয়েল
সূত্র

শতাংশের উচ্চতায় ক্যালক ব্যবহার করা থেকে সাবধান থাকুন। সমস্ত পিতা-মাতার একটি উচ্চতা নির্ধারিত না হলে ফায়ারফক্স সঠিকভাবে এটির সাথে কাজ করবে না।

— টমডিকে

4

আমার জন্য, পরবর্তীটি ভাল কাজ করেছে:

আমি একটি ডিভিডিতে শিরোলেখ এবং সামগ্রীটি মোড়ানো করেছি

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

আমি এই রেফারেন্সটি ফ্লেক্সবক্সের সাহায্যে উচ্চতা পূরণ করতে ব্যবহার করেছি। সিএসএস এভাবে চলে:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

ফ্লেক্সবক্স কৌশল সম্পর্কে আরও তথ্যের জন্য, রেফারেন্সটি দেখুন

— hasher
সূত্র

1

আপনি পিতামাতাকে সেট করতে পারেন display: inline। Http://codepen.io/tommymarshall/pen/cECyH দেখুন

এইচটিএমএল এবং দৈহিক দৈর্ঘ্যের উচ্চতাও 100% তে সেট করা নিশ্চিত হয়ে নিন।

— tommymarshall
সূত্র

কেবল লিঙ্ক-উত্তর উত্তর নিরুৎসাহিত করা হয়। দয়া করে আপনার উত্তরে লিংক সামগ্রীটি সংক্ষিপ্ত করার চেষ্টা করুন

— ব্যবহারকারী যে

1

গৃহীত উত্তর কার্যকর হয় না। এবং সর্বোচ্চ ভোট দেওয়া উত্তর প্রকৃত প্রশ্নের উত্তর দেয় না। একটি নির্দিষ্ট পিক্সেল উচ্চতার শিরোলেখ এবং ব্রাউজারের অবশিষ্ট প্রদর্শনে একটি ফিলার এবং owflow হিসাবে স্ক্রোল করুন। এখানে একটি সমাধান যা নিখরচায় অবস্থান নির্ধারণ করে বাস্তবে কাজ করে। আমি এটিও ধরে নিয়েছি যে শিরোনামটির উচ্চতাটি জানা আছে, প্রশ্নের মধ্যে "স্থির শিরোনাম" এর শব্দ দ্বারা। আমি এখানে উদাহরণ হিসাবে 150px ব্যবহার করি:

এইচটিএমএল:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

সিএসএস: (শুধুমাত্র ভিজ্যুয়াল এফেক্টের জন্য পটভূমি রঙ যুক্ত করা)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

আরো বিস্তারিত টি দেখতে কিভাবে এই কাজ, ভিতরে প্রকৃত কন্টেন্ট সঙ্গে #Content, এই কটাক্ষপাত আছে jsfiddle , বুটস্ট্র্যাপ সারি এবং কলাম ব্যবহার করে।

— jumps4fun
সূত্র

"নির্দিষ্ট পিক্সেল উচ্চতার শিরোনাম" -> এটি ঠিক! bottomসম্পত্তি নিশ্চিত করুন যে প্রণীত #Contentথাকার বিষয়টি মতেই পৃষ্ঠার শেষে আটকে। আমি আপনাকে এটি ব্যাখ্যা করার জন্য সময় দেওয়ার প্রশংসা করি।

— আর্মফুট

1

এবং আমি আনন্দিত এটি কাউকে সহায়তা করেছে;)

— 7'19

1

এই উদাহরণে আমি চাই যে আমার মূল বিষয়বস্তু ডিভটি তরল উচ্চতাযুক্ত যাতে পুরো পৃষ্ঠাটি ব্রাউজারের উচ্চতার 100% পর্যন্ত নেয়।

height: 100vh;

— ফজল হালাই
সূত্র

1

দয়া করে আমাকে এখানে আমার 5 সেন্ট যুক্ত করুন এবং একটি ধ্রুপদী সমাধান অফার করুন:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

স্নিপেট প্রসারিত করুন

এটি সমস্ত ব্রাউজারে কোনও স্ক্রিপ্ট, কোনও ফ্লেক্সে কাজ করবে। পূর্ণ পৃষ্ঠা মোডে স্নিপেট খুলুন এবং ব্রাউজারের আকার পরিবর্তন করুন: পছন্দসই অনুপাতগুলি পূর্ণ স্ক্রিন মোডেও সংরক্ষণ করা হয়।

বিঃদ্রঃ:

বিভিন্ন ব্যাকগ্রাউন্ড রঙযুক্ত উপাদানগুলি একে অপরকে কভার করতে পারে। উপাদানগুলি সঠিকভাবে স্থাপন করা হয়েছে তা নিশ্চিত করার জন্য আমি এখানে শক্ত সীমানা ব্যবহার করেছি।
idHeader.heightএবং idContent.topসীমানা অন্তর্ভুক্ত করার জন্য সামঞ্জস্য করা হয় এবং সীমানা ব্যবহার না করা হলে একই মান থাকা উচিত। অন্যথায় উপাদানগুলি ভিউপোর্ট থেকে সরিয়ে ফেলবে, যেহেতু গণনা করা প্রস্থে সীমানা, মার্জিন এবং / অথবা প্যাডিং অন্তর্ভুক্ত নয়।
left:0; right:0; দ্বারা প্রতিস্থাপন করা যেতে পারে width:100%যদি কোনও সীমানা ব্যবহার না করা হয় তবে একই কারণে ।
পৃথক পৃষ্ঠায় পরীক্ষা করা (স্নিপেট হিসাবে নয়) কোনও এইচটিএমএল / বডি সমন্বয় প্রয়োজন হয় না।
আই 6 এবং পূর্ববর্তী সংস্করণগুলিতে আমাদের অবশ্যই উপাদানটিতে padding-topএবং / অথবা padding-bottomবৈশিষ্ট্য যুক্ত করতে হবে #idOuter।

আমার উত্তরটি সম্পূর্ণ করতে, এখানে পাদচরণ লেআউটটি রয়েছে:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

স্নিপেট প্রসারিত করুন

এবং এখানে উভয় শিরোলেখ এবং পাদচরণ সহ লেআউটটি রয়েছে:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

স্নিপেট প্রসারিত করুন

— দিমিত্রি বাবিচ
সূত্র

0

আপনার 9 বা নীচে সমর্থন করার প্রয়োজন না হলে আমি ফ্লেক্সবক্স ব্যবহার করব would

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

পুরো পৃষ্ঠাটি পূরণ করার জন্য আপনাকে শরীরও পেতে হবে

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

— জেমস ল্যামবার্ট
সূত্র

0

সিএসএস প্লাই | ক্রস ব্রাউজার স্থির শিরোনাম / পাদচরণ / কেন্দ্রিক একক কলাম লেআউট

সিএসএস ফ্রেম, সংস্করণ 2: উদাহরণ 2, নির্দিষ্ট প্রস্থ | 456 বেরিয়া স্ট্রিট

একটি গুরুত্বপূর্ণ বিষয় হ'ল এটি সহজ শোনার পরেও, আপনার সিএসএস ফাইলে anুকে কিছুটা কুৎসিত কোড আসবে যাতে এরূপ প্রভাব পাওয়া যায়। দুর্ভাগ্যক্রমে, এটি সত্যই একমাত্র বিকল্প।

— জো
সূত্র

কেবল লিঙ্ক-উত্তর উত্তর নিরুৎসাহিত করা হয়। আপনার উত্তরে কোডটি অন্তর্ভুক্ত করার চেষ্টা করুন।

— ব্যবহারকারী যে

0

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

— জাজিব খান
সূত্র

-1

আমি এখনও অবধি সবচেয়ে ভাল সমাধানটি পাতার নীচে একটি পাদলেখক উপাদান সেট করা এবং তারপরে ফুটারের অফসেটের পার্থক্য এবং আমাদের যে উপাদানটি প্রসারিত করতে হবে তা মূল্যায়ন করা। যেমন

এইচটিএমএল ফাইল

<div id="contents"></div>
<div id="footer"></div>

সিএসএস ফাইল

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

জেএস ফাইল (জ্যাকোয়ারি ব্যবহার করে)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

আপনি প্রতিটি উইন্ডো পুনরায় আকারে সামগ্রীর উপাদানটির উচ্চতা আপডেট করতে পছন্দ করতে পারেন, তাই ...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

— Αλέκος
সূত্র

-1

খুব সহজ:

#content {
    max-height: 100%;
}

— মাসুদ
সূত্র

-3

আপনি কি এরকম কিছু চেষ্টা করেছেন?

সিএসএস:

.content {
    height: 100%;
    display: block;
}

এইচটিএমএল:

<div class=".content">
<!-- Content goes here -->
</div>

— রাহুল চৌধুরী
সূত্র