উচ্চতা কেন হয় না: 100% স্ক্রিনের উচ্চতায় ডিভগুলি প্রসারিত করতে কাজ করে?

295

আমি চাই কারوسেল ডিআইভি (এস 7) পুরো পর্দার উচ্চতায় প্রসারিত হোক। কেন এটি সফল হচ্ছে না সে সম্পর্কে আমার ধারণা নেই। পৃষ্ঠাটি দেখতে আপনি এখানে যেতে পারেন ।

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

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

html css height

— আর্ল লারসন
সূত্র

2

এখানে একটি সহজ এবং স্পষ্ট ব্যাখ্যা: স্ট্যাকওভারফ্লো.com/

— মাইকেল বেঞ্জামিন

নেস্টেড উপাদানের জন্য সম্ভবত সবচেয়ে ভালো সমাধান যে সমগ্র উইন্ডোর উচ্চতা প্রসারিত করা উচিত নয় stackoverflow.com/questions/7049875/height-100-not-working/...

— বি-গুন্ডা

409

উচ্চতার জন্য কাজ করার জন্য শতাংশের মানটির জন্য, পিতামাতার উচ্চতা নির্ধারণ করতে হবে। একমাত্র ব্যতিক্রম হ'ল মূল উপাদান <html>, যা শতাংশের উচ্চতা হতে পারে। ।

সুতরাং, আপনি ব্যতীত আপনার সমস্ত উপাদানকে উচ্চতা দিয়েছেন <html>, সুতরাং আপনার কী করা উচিত তা যুক্ত করুন:

html {
    height: 100%;
}

এবং আপনার কোড ভাল কাজ করা উচিত।

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

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

জেএসফিডালের উদাহরণ ।

— মাদারার ভূত
সূত্র

23

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

— jay_t55

29

@Joey: এইচটিএমএল হয় প্রকৃত উপাদান। আপনি এটি CSS এর সাথে স্টাইল করতে পারেন, জাভাস্ক্রিপ্টে এটিতে ইভেন্টগুলি হুক করতে পারেন, এতে ক্লাস এবং আইডি যুক্ত করতে পারেন এবং এটি ডিওএম-এ প্রদর্শিত হবে। ব্রাউজারটি <html>ট্যাগ ছাড়াই এমনকি কোনও উপাদান <head>বা <body>উপাদান ছাড়াই কোনও এইচটিএমএল নথি ধরে ফেলবে । এইচটিএমএল স্পেসগুলি <html>ট্যাগটিকে বাধ্যতামূলক মনে করে । সংক্ষেপে, হ্যাঁ, এটি অন্যান্য সমস্ত এইচটিএমএল উপাদানগুলির মতো একটি পূর্ণাঙ্গ উপাদান।

— মাদারার ঘোস্ট

1

@ সেকানড্রিকুডো: না, <html>ট্যাগটি চশমা অনুসারে optionচ্ছিক (যেমন HTML4 এবং এইচটিএমএল 5)। এবং হ্যাঁ, উপাদানটি যাইহোক তৈরি করা হয়েছে।

— রবার্ট সিমার

2

হুম ... আমার জন্য, এই কাজটি করার একমাত্র উপায় ছিল উভয়কে সেট করা htmlএবং bodyপাশাপাশি height: 100%(পাশাপাশি অবশ্যই divআমি নির্দিষ্ট 100% উচ্চতা অর্জন করতে চাই)

— জেমস

1

@ জেমস হ্যাঁ, সমস্ত পিতামাতার অবশ্যই একটি উচ্চতা থাকতে হবে।

— মাদারার ঘোস্ট

146

_{যেহেতু কেউ এটি উল্লেখ করেনি ..}

আধুনিক পদ্ধতি:

উভয় html/ bodyউপাদানের উচ্চতা নির্ধারণের বিকল্প হিসাবে 100%আপনি ভিউপোর্ট-শতাংশের দৈর্ঘ্যও ব্যবহার করতে পারেন:

5.1.2। ভিউপোর্ট-শতাংশের দৈর্ঘ্য: 'vw', 'vh', 'vmin', 'vmax' ইউনিট

ভিউপোর্ট-শতাংশের দৈর্ঘ্য প্রাথমিকযুক্ত ব্লকটির আকারের সাথে সম্পর্কিত। প্রাথমিক ধারণকারী ব্লকের উচ্চতা বা প্রস্থ পরিবর্তন করা হয়, সেগুলি সেই অনুযায়ী মাপা হয়।

এই উদাহরণে, আপনি মানটি 100vh(যা ভিউপোর্টের উচ্চতা) ব্যবহার করতে পারেন - (উদাহরণস্বরূপ)

body {
    height: 100vh;
}

একটি সেটও min-heightকাজ করে। (উদাহরণস্বরূপ)

body {
    min-height: 100vh;
}

এই ইউনিটগুলি বেশিরভাগ আধুনিক ব্রাউজারগুলিতে সমর্থিত - সমর্থন এখানে পাওয়া যাবে ।

— জোশ ক্রোজিয়ার
সূত্র

1

আমি এটার কোনও লাভ দেখছি না। এটি ব্রাউজারের জন্য অতিরিক্ত কাজ তৈরি করে না যা ব্রাউজার ভিউপোর্টের সাথে সম্পর্কিত সমস্ত কিছু গণনা করা দরকার? আপনি যখন ব্রাউজারের উচ্চতার সাথে সম্পর্কিত কোনও জিনিসকে আকার দিতে চান কেবল তখনই ভিউপোর্টের আকার পরিবর্তন করা উপকারী বলে মনে হয়।

— রবার্ট

12

@ রবার্টওয়েেন্ট উদাহরণস্বরূপ, height: 100%কেবলমাত্র পিতামাতার উপাদানগুলির একটি নির্ধারিত উচ্চতা থাকলে কাজ করে। কিছু কিছু ক্ষেত্রে অবশ্যই রয়েছে যেখানে কোনও উপাদানটির পিতামাতার একটি সংজ্ঞায়িত উচ্চতা না থাকে এবং ভিউপোর্ট শতাংশ শতাংশ ইউনিট সমাধান করে। অন্য কথায়, যদি আপনার গভীরভাবে নেস্টেড উপাদান থাকে তবে আপনি কেবল সেট 100vhকরতে পারেন এবং এটিতে 100%ব্রাউজারের উচ্চতাও থাকবে । আপনি কোনও সুবিধা দেখতে পাবেন না, তবে আমি এমন অনেক ক্ষেত্রে রয়েছি যেখানে এগুলির একমাত্র সমাধান ছিল। এই ইউনিটগুলি html/ এর মতো মূল উপাদানগুলির জন্য ততটা উপকারী নাও হতে পারে bodyতবে তবুও, এটি একটি বিকল্প

— জোশ ক্রোজিয়ার

2

তবে আমরা দেহ উপাদান সম্পর্কে কথা বলছি, গভীরভাবে নেস্টেড উপাদান নয়। কেবলমাত্র একটি সম্ভাব্য পিতা-মাতা, এইচটিএমএল উপাদান। এ কারণেই আমি উল্লেখ করেছি যে আমি কোনও লাভ দেখছি না এবং এটি সম্ভবত 100% সেট করার চেয়ে খারাপ is আপনার মন্তব্য অন্যথায় আমাকে সরু করতে কিছুই বলে না। কিছু নতুন হওয়ার কারণে এটি আরও ভাল হয় না। এটি অবশ্য একটি বিকল্প।

— রবার্ট

4

এই পদ্ধতির একটি সমস্যা হ'ল আইফোনগুলি ভিউ উচ্চতা থেকে ঠিকানা বার এবং নীচের নেভিগেশন বাদ দেয়, যার অর্থ body { height: 100vh }প্রাথমিক পৃষ্ঠা লোডে একটি স্ক্রোল বার থাকবে।

— ভোল্ট

2

খুশী হলাম। আমি অন্য পদ্ধতির চেষ্টা করেছিলাম, আমি height: 100% !important" to each parent til এইচটিএমএলকে সাফল্য ছাড়াই রেখেছি , আমি ডোমে দেখতে পেলাম যে গাছের প্রতিটি নোড আসলেই ছিল 100%তবে আমি পছন্দসই উপাদানটিতে 100% সেট করতে পারিনি, তবে ভিউপোর্ট শৈলীটি সহজ ছিল

— pmiranda

25

আপনাকে htmlউপাদানটিতে 100% উচ্চতাও নির্ধারণ করতে হবে :

html { height:100%; }

— shanethehat
সূত্র

20

বিকল্পভাবে, আপনি যদি ব্যবহার করেন position: absoluteতবে height: 100%ঠিকঠাক কাজ করবে।

— স্টিভ টাবার
সূত্র

4

যদি আমি আমার লেআউটটি তৈরি করতে ফ্লেক্সবক্স ব্যবহার না করতাম তবে এটি দুর্দান্ত সমাধান হবে। : /

— ল্যান্ডন

2

সেট করতে ভুলবেন না width:100%;এবং পিতামাতাকে position:relative;।

— কাই নোক

8

আপনার মূল উপাদানগুলির সাথে চেষ্টা করা উচিত;

html, body, form, main {
    height: 100%;
}

তাহলে এটি যথেষ্ট হবে:

#s7 {
   height: 100%;
}

— mrbengi
সূত্র

5

যদি আপনি চান, উদাহরণস্বরূপ, একটি বাম কলাম (উচ্চতা 100%) এবং সামগ্রী (উচ্চতা অটো) আপনি নিখুঁত ব্যবহার করতে পারেন:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

এইচটিএমএলে:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— YellowMart
সূত্র

2

এটি আদর্শ নাও হতে পারে তবে আপনি জাভাস্ক্রিপ্ট দিয়ে সর্বদা এটি করতে পারেন। বা আমার ক্ষেত্রে jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— Obo
সূত্র

5

যখন CSS একা যথেষ্ট হবে তখন জাভাস্ক্রিপ্ট ব্যবহার করা ভাল ধারণা নয়।

— Bosworth99

1

এমনকি কেন এমন কিছু করে এবং এটি হওয়া উচিতের চেয়ে জটিল করে তোলে? আমি কিছু উত্তর বুঝতে পারছি না তোমার ...

— CapturedTree

1

পৃষ্ঠা উত্সে আমি নিম্নলিখিতটি দেখতে পাচ্ছি:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

আপনি যদি উচ্চতায় মানটি ট্যাগে রাখেন তবে এটি CSS ফাইলের মধ্যে সংজ্ঞায়িত উচ্চতার পরিবর্তে এটি ব্যবহার করবে।

— স্টিভেন
সূত্র

এটি অদ্ভুত কারণ পৃষ্ঠা পৃষ্ঠায় এটি আমি দেখতে পাই: <ডি ক্লাস = "ধারক"> <tr> <td> <ডিভি আইডি = "এস 7"> <ডিভি আইডি = "পোস্ট">

— আর্ল লারসন

ঠিক আছে, আপনি কীভাবে আপনার উপরের কোডটি পেয়েছেন তা আমি জানি না, তবে আমি ভিতরে গিয়ে <div id = "s7"> কে <div id = "s7" শৈলী = "উচ্চতা: 100%;"> এ পরিবর্তন করেছি এবং এটি কার্যকর হয়েছে। এটা আমার কাছ থেকে কিছু লুকিয়ে আছে? যেভাবেই হোক থ্যাঙ্কিও :)

— আর্ল লারসন

1

আপনি যদি ডিভের ভিতরে উপাদানগুলিকে একেবারে অবস্থান করেন তবে আপনি প্যাডিং শীর্ষ এবং নীচে 50% এ সেট করতে পারেন।

সুতরাং এর মতো কিছু:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— কিথ ব্রাউন
সূত্র

1

আমি দেখতে পাচ্ছি না যে এটি কীভাবে কাজ করতে পারে যেহেতু 50% প্রস্থের সাথে সম্পর্কিত উপাদানটির উচ্চতার তুলনায় আপেক্ষিক নয়, বা আমি এখানে কিছু মিস করছি?

— DrLightman

0

যারা ব্যবহার করতে চান না তাদের জন্য এখানে আরও একটি সমাধান html, body, .blah { height: 100% }।

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

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

— TheMisir
সূত্র