কীভাবে তার পিতামাতার 100% উচ্চতা ভাসমান ডিভ করবেন?

Question

এইচটিএমএল:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

এবং এখানে সিএসএস:

#inner {
  float: left;
  height: 100%;
}

ক্রোম বিকাশকারী সরঞ্জামগুলির সাথে পরিদর্শন করার পরে, অভ্যন্তরীণ ডিভটি 0 পিক্সের উচ্চতা পাচ্ছে।

আমি কীভাবে এটিকে পিতামাতার দ্বীপের উচ্চতার 100% হতে বাধ্য করতে পারি?

Comments

সুতরাং আপনি বাইরের ডিভের পাঠ্যটি (অভ্যন্তরীণ ডিভের মধ্যে নয়) চান, তবে ভাসমান অভ্যন্তরীণ ডিভটি বাইরের ডিভের উচ্চতা হতে চান?

— এডল

আপনি যে ফলাফলটি অর্জনের চেষ্টা করছেন তা কী? আমার অনুমান যে আমার বিভ্রান্তি এর মধ্যে রয়েছে যে যদি ভিতরের ডিভটি বাইরের মতো উচ্চতর হয় এবং বাইরের অংশটি পাঠ্যের মতো হয় তবে এটি কি অভ্যন্তরীণ ডিভের মধ্যে পাঠ্য থাকা সমান নয়?

— এডিএল

@ এডিএল: হ্যাঁ, এটি :) এটি যেভাবে আমি এটি চাই তার কারণটি হ'ল অভ্যন্তরীণ ডিভের ব্যাকগ্রাউন্ড হিসাবে একটি চিত্র রয়েছে। পাঠ্যটির পাশে থাকা দরকার। উভয়টিরই বাহ্যিক ডিভের ভিতরে থাকা প্রয়োজন কারণ এটির ব্যাকগ্রাউন্ড চিত্রও রয়েছে।

— নাথান ওসমান

এছাড়াও স্ট্যাকওভারফ্লো.com

— চাদউইক

এই প্রশ্নের উত্তরগুলি দেখতে এবং চেষ্টা করা কেবল হতাশাবোধক ছিল।

— চিরন্তন আওয়ার

Answer 1

জন্য #outerউচ্চতা এর বিষয়বস্তু উপর ভিত্তি করে করা হয়, এবং আছে #innerবেস যে তার উচ্চতা, উভয় উপাদান একেবারে স্থান আছে।

আরো বিস্তারিত জানার জন্য বৈশিষ্ট খুঁজে পাওয়া যেতে পারে CSS উচ্চতা সম্পত্তি , কিন্তু মূলত, #innerউপেক্ষা করা উচিত নয় #outerযদি উচ্চতা #outerএর উচ্চতার auto, যদি না #outer একেবারে অবস্থিত। তারপরে #innerউচ্চতা 0 হবে, যদি না #inner নিজেই একেবারে অবস্থান করে।

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

তবে ... #innerএকেবারে অবস্থানের দ্বারা , একটি floatসেটিংস উপেক্ষা করা হবে, সুতরাং আপনাকে #innerস্পষ্টভাবে একটি প্রস্থ বেছে নিতে হবে এবং আপনার #outerযে পাঠ্য মোড়ানো রয়েছে তা সন্দেহ করে জাল করতে প্যাডিং যুক্ত করতে হবে। উদাহরণস্বরূপ, নীচে, এর প্যাডিং +3 #outerপ্রস্থ #inner। সুবিধার্থে (পুরো পয়েন্টটি #innerউচ্চতাটি 100% হতে হবে) নীচে পাঠ্য মোড়ানোর দরকার নেই #inner, সুতরাং #innerএটি ভাসমানের মতো দেখায় ।

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

আমি আমার আগের উত্তরটি মুছলাম, কারণ এটি আপনার লক্ষ্য সম্পর্কে অনেক বেশি ভুল অনুমানের ভিত্তিতে ছিল।

Comments

হুম .. প্রশ্নটি ভাসমান ডিভ এর সম্পর্কে ছিল about আপনি একেবারে অবস্থান

— ডিভগুলি

খুব সহজেই সাধারণ জিনিসগুলি অর্জন করা কতটা জটিল তা অবাক করে দেখি না HTML/CSS:)

— ইউরি নাকনটেকায়ি

হার্ডকোডিং প্রস্থগুলি ছাড়াই এটি করার কোনও উপায়? প্রতিক্রিয়াশীল ধারকগুলির জন্য দুর্দান্ত নয়।

— জ্যাক উইলসন

আমি জানি না কেন এটি এতটা গৃহীত হয়েছিল এবং এত বেশি পরিমাণে উন্নীত হয়েছিল। প্রশ্নটি ভাসমান ডিভস সম্পর্কে, যা এটি আমার অনুসন্ধান থেকে আমাকে এখানে এনেছে এবং পরিবর্তে এই উত্তরগুলি একেবারে অবস্থানযুক্ত ডিভগুলি নিয়ে আসে।

— ম্যাট কে

কিভাবে এটি ভাসমান ধারক এটি ধারকভাবে ফিট করে? এটিকে আর ভাসিয়ে না দিয়ে! হা হা। চমৎকার চেষ্টা করুন, এবং যথেষ্ট কার্যকর হিসাবে বিবেচিত হিসাবে যথেষ্ট।

— রল্ফ

Answer 2

পিতামাতার জন্য:

display: flex;

আপনার কিছু উপসর্গ যুক্ত করা উচিত http://css-tricks.com/used-flexbox/

সম্পাদনা করুন: কেবল ত্রুটিটি যথারীতি আইই, আই 99 ফ্লেক্স সমর্থন করে না। http://caniuse.com/flexbox

সম্পাদনা 2: @ টডডসবি যেমন উল্লেখ করেছেন, প্রান্তিককরণ আইটেমগুলি পিতামাতার জন্য এবং এটির ডিফল্ট মান আসলে প্রসারিত । আপনি যদি সন্তানের জন্য আলাদা মান চান, তবে স্বতন্ত্র সম্পত্তি প্রান্তিককরণ আছে।

সম্পাদনা 3: জেএসফিডাল: https://jsfiddle.net/bv71tms5/2/

Comments

আপনার উল্লেখ করা উচিত যে এটি কেবল আধুনিক ব্রাউজারগুলিতে কাজ করে এবং তারপরেও বিক্রেতা উপসর্গের প্রয়োজন।

— কনটুর

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

— লুক

এই ঠিক এখানে উত্তর। আইই 9 শীঘ্রই যথেষ্ট বেরিয়ে আসবে, পাশাপাশি এটি একটি ভাল, শক্ত কিক দেওয়ার মাধ্যমে পাশাপাশি সহায়তা করবে। এই সমাধানটি এত সুন্দর, সহজ এবং সহজ ... আমি বিকল্প সমাধানগুলি একসাথে হ্যাকিংয়ের মাধ্যমে সম্পন্ন করেছি। ;)

— জ্রিস্টা

ফ্লেক্সবক্সের সাম্প্রতিকতম অনুমান অনুসারে: w3.org/TR/css-flexbox-1/#align-items-property দেখুন । align-items: stretch;এটি ডিফল্ট মান হিসাবে প্রয়োজন হয় না। এছাড়াও এটি সন্তানের নয় পিতামাতার সংজ্ঞা দেওয়া উচিত।

— টডসবি

উত্তরে মিতাময় যোগ করা হয়েছে। @ টিগ্রান

— আইপি

Answer 3

প্রকৃতপক্ষে, যতক্ষণ না পিতামাতার উপাদান অবস্থান থাকে আপনি বাচ্চার উচ্চতা 100% এ সেট করতে পারেন। যথা, আপনি যদি না চান যে পিতা-মাতার একেবারে অবস্থান রয়েছে। আমাকে আরও ব্যাখ্যা করুন:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

Comments

শীতল, এটি চাদউইকের প্রয়োজনের তুলনায় কম সীমাবদ্ধ position:absolute(যা কোনও সাইটের শৈলীতে হস্তক্ষেপ করতে পারে)

— হেনরি

এটি কেবল আমারই হতে পারে তবে পাশের বারটি সামগ্রীটির চেয়ে বড় হলে আমার সমস্যা আছে। পটভূমির রঙ পিতামাতার পাত্রে থামবে তবে পার্শ্বদণ্ডের সামগ্রীটি পিতামাতার বাইরে উপচে পড়বে।

— হাওডি_এমসিজি

এটি অনেক বেশি নমনীয় সমাধান এবং আপনার বেশ কয়েকটি ভাসমান শিশু উপাদান থাকা সত্ত্বেও তাদের অফসেটটি একেবারে অবস্থিত করে তোলা শৈলীতে এটি একটি গ্রহণযোগ্য অসুবিধা বলে মনে হচ্ছে। +1

— কনটুর

আপনাকে ধন্যবাদ খুব অনেক। আমি অন্য নির্দিষ্ট প্রশ্নের উত্তর হিসাবে আমার নির্দিষ্ট সমাধানটি এসও তে পোস্ট করেছি: stackoverflow.com/a/31749164/84661 ।

— ব্রায়ান হক

Answer 4

যতক্ষণ না আপনি ইন্টারনেট এক্সপ্লোরারের সংস্করণগুলিতে আইই 8 এর আগে সমর্থন করতে হবে না, আপনি এটি display: table-cellসম্পাদন করতে ব্যবহার করতে পারেন:

এইচটিএমএল:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

সিএসএস:

.inner {
    display: table-cell;
}

এটি .innerশ্রেণীর সাথে প্রতিটি উপাদানকে তার মূল উপাদানটির পূর্ণ উচ্চতা দখল করতে বাধ্য করবে ।

Comments

যদিও এটি কাজ করবে, এটি কোনও মার্জিন প্রদর্শন করবে না, এমনকি আপনি যদি একটি নির্দিষ্ট করেও থাকেন। সুতরাং আপনি যদি একটি মার্জিন বরাদ্দ করতে চান তবে এই সমাধানটি ব্যর্থ হবে। আপনি প্যাডিংকে একটি ওয়ার্ক-আওয়ার হিসাবে বরাদ্দ করতে পারেন, তবে আপনার যদি মার্জিনের প্রয়োজন হয় (এবং প্যাডিং নয়) তবে আপনি কীভাবে এটি সমাধান করবেন?

— ডেভনার 12

আমি কি এখানে কিছু মিস করছি? আপনার প্রশ্নটি উচ্চতর 100% থাকতে একটি ভাসমান উপাদানটির জন্য জিজ্ঞাসা করে। ভাসমান অবস্থায়, কোনও display: table-cell;উপাদান তার ধারকটির উচ্চতা আর পূরণ করে না? আমি অবশ্যই কিছু মিস করছি, কারণ এটি আপনার নিজের প্রশ্ন ...?

— user56reinstatemonica8

Answer 5

আমি আপনার সমস্যার সমাধান করার জন্য একটি উদাহরণ তৈরি করেছি ।

আপনাকে একটি মোড়ক তৈরি করতে হবে, এটি ভাসাবেন, তারপরে আপনার ডিভকে পরম করুন এবং এটি 100% উচ্চতা দিন।

এইচটিএমএল

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

সিএসএস:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

ব্যাখ্যা: ডান। এর অর্থ এর প্রস্থ এবং উচ্চতা এবং উপরের এবং বাম অবস্থানগুলি কেবলমাত্র পিতা বা মাতা ডিভের উপর ভিত্তি করে গণনা করা হবে কেবলমাত্র সিডিএসে প্রস্থ বা উচ্চতার বৈশিষ্ট্যগুলি স্পষ্টভাবে ঘোষণা করা হলে; যদি সেগুলি স্পষ্টতাই ঘোষিত না হয় তবে সেই বৈশিষ্ট্যগুলি প্যারেন্ট পাত্রে (। ডানদিকে-আবরণ) ভিত্তিতে গণনা করা হবে।

সুতরাং, ডিআইভির 100% উচ্চতা। কনটেনার চূড়ান্ত উচ্চতার ভিত্তিতে গণনা করা হবে, এবং ডান পজিশনের চূড়ান্ত অবস্থানটি পিতামাতার ধারকের ভিত্তিতে গণনা করা হবে।

Comments

এটি এমন পরিস্থিতিতে দৃ This় সমাধান যা আপনি গ্যারান্টি দিতে পারবেন যে .rightকলামের সামগ্রীটি কলামের সামগ্রীর চেয়ে কম .left। উদাহরণস্বরূপ, আপনি যদি এটি কোনও উপাদানটিতে ব্যবহার করছেন যেখানে .leftকলামটিতে কিছু পরিবর্তনশীল আকারের সামগ্রী রয়েছে এবং ডান কলামটি কেবল বিশদ পৃষ্ঠায় একটি তীর প্রদর্শন করে তবে এই সমাধানটি ভালভাবে কাজ করে।

— এটির

Answer 6

এটি অর্জনের এটি এখানে একটি সহজ উপায়:

1. তিনটি উপাদানের ধারক (# বাটি) প্রদর্শন সেট করুন: সারণী
2. এবং উপাদানগুলি নিজেরাই (# অভ্যন্তরীণ) প্রদর্শন সেট করুন: টেবিল-ঘর
3. ভাসমানটি সরান।
4. সাফল্য।

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

100% উচ্চতায় ভাসমান বিভাগে @ ইটাকে ধন্যবাদ

Answer 7

আপনি যদি কিছুটা jQuery ব্যবহার করতে প্রস্তুত হন তবে উত্তরটি সহজ!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

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

আশা করি এটি সহযোগী jQuery অনুরাগীদের সহায়তা করবে।

Comments

এই লেআউট সমস্যাটিতে জাভাস্ক্রিপ্ট নিক্ষেপ করা ওভারকিল বলে মনে হচ্ছে।

— কনটুর

আইই-তে উন্নত হওয়ার মতো কেউ: আপনাকে ধন্যবাদ!

— দাড়কাক

একটু ওভারকিল হয়তো, তবে এটি একটি সুন্দর উত্তর, ধন্যবাদ!

— মার্টিন

আমি একমত যে সমস্ত অবস্থানের সমস্যাগুলি জেএস ছাড়াই সমাধান করা উচিত।

— মাইকেলেলস্কভ 10

এটি JS এবং jQuery ব্যবহার করার জন্য ওভারকিল

— ভিলিয়াসল

Answer 8

এটি সমান উচ্চতা সহ গ্রিড সিস্টেমের জন্য একটি কোড নমুনা।

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

উপরে বাইরের ডিভের সিএসএস রয়েছে

#inner{
width: 20%;
float: left;
border: 1px solid;
}

উপরের অংশটি ভিতরের ডিভ

আশা করি এটি আপনাকে সাহায্য করবে

Answer 9

এটি আমাকে সাহায্য করেছিল।

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

ডান পরিবর্তন করুন: এবং বাম: পছন্দসই # অভ্যন্তর প্রস্থ সেট করতে।

Answer 10

যখন আপনার বেশ কয়েকটি শিশু উপাদানগুলির একই উচ্চতার প্রয়োজন হয় তখন অনুরূপ ক্ষেত্রে ফ্লেক্সবক্সের মাধ্যমে সমাধান করা যায়:

https://css-tricks.com/using-flexbox/

display: flex;পিতামাতাদের জন্য এবং flex: 1;শিশু উপাদানগুলির জন্য সেট করুন , তাদের সবার একই উচ্চতা থাকবে।

Answer 11

চেষ্টা

#outer{overflow: auto;}

এতে আরও বিকল্প দেখান: আপনি কীভাবে ভাসমান উপাদানগুলির পিতামাতাকে ভেঙ্গে ফেলা থেকে আটকে রাখবেন?

Comments

"ওভারফ্লো: লুকানো" বিকল্পটি আরও ভালভাবে কাজ করবে বলে মনে হচ্ছে কারণ রোলিংয়ের কোনও সম্ভাবনা নেই ...

— রদ্রিগো

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

— ডোনাল্ড ডাক