পরম পজিশনের ডিভ তৈরি করুন পিতামাতার উচ্চতা বাড়ান

Question

আপনি নীচের সিএসএসে দেখতে পাচ্ছেন, আমি child2নিজেই এর আগে অবস্থান করতে চাই child1। এটি কারণ যেটি আমি বর্তমানে বিকাশ করছি সেই সাইটের মোবাইল ডিভাইসগুলিতেও কাজ করা উচিত, যার child2নীচে থাকা উচিত, কারণ এতে মোবাইল ডিভাইসগুলির সামগ্রীর নীচে নেভিগেশন রয়েছে যা আমি চাই। - 2 মাস্টারপেজ কেন নয়? এটি কেবলমাত্র 2 divsযা পুরো এইচটিএমএল-এ পুনঃস্থাপন করা হয়, তাই এই সামান্য পরিবর্তনের জন্য 2 মাস্টারপেজগুলি ওভারকিল।

এইচটিএমএল:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

সিএসএস:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2 গতিশীল উচ্চতা রয়েছে, কারণ বিভিন্ন সাবসাইটে কম-বেশি নেভিগেশন আইটেম থাকতে পারে।

আমি জানি যে নিরঙ্কুশ অবস্থানযুক্ত উপাদানগুলি প্রবাহ থেকে সরিয়ে ফেলা হয়, এইভাবে অন্যান্য উপাদান দ্বারা উপেক্ষা করা হয়।
আমি overflow:hidden;পিতামাতার ডিভ উপর সেট করার চেষ্টা করেছি , কিন্তু এটি কোনও উপকারে আসে না, নাও করে clearfix।

আমার শেষ অবলম্বনটি সেই divsঅনুযায়ী দুটি স্থির করার জন্য জাভাস্ক্রিপ্ট হবে , তবে আপাতত আমি চেষ্টা করে দেখব যে এটি করার কোনও জাভাস্ক্রিপ্ট পদ্ধতি নেই কিনা।

Comments

আমি ১০০% নিশ্চিত নই তবে আমি মনে করি আপনাকে সম্ভবত একটি জেএস সমাধানের জন্য যেতে হবে যা চাইল্ড 2 এর উচ্চতা কার্যকর করে এবং সেই অনুযায়ী চাইল্ড 1 সরিয়ে দেবে।

— বিলি মোয়াট

এটি পিতা-মাতার অবস্থানকে আপেক্ষিক এবং সন্তানের নিকটে নির্ধারণের মাধ্যমে করা যেতে পারে।

— ছত্রাকসংক্রান্তি

এই workaround দেখুন এটি সাহায্য করতে পারে।

— Az.Youness

Answer 1

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

আপনি হয় নির্ধারিত উচ্চতা ব্যবহার করেন বা আপনাকে জেএস জড়িত করতে হবে।

Comments

প্রযুক্তিগতভাবে এটি সঠিক উপায় হিসাবে আমি এটি চিহ্নিত করছি, যদিও আমি আমার সমস্যার আরও একটি সমাধান পেয়েছি, যা নির্দিষ্ট পৃষ্ঠাগুলিতে প্রয়োজনীয় সিএসএস বাসা বেঁধে দেওয়া উচিত (মুহূর্তে 40 এর মধ্যে 2)।

Answer 2

যদিও উপাদানগুলির সাথে প্রসারিত করা position: absoluteসম্ভব নয় তবে প্রায়শই এমন সমাধান রয়েছে যেখানে আপনি একই প্রভাব অর্জনের সময় নিখুঁত অবস্থান এড়াতে পারবেন। আপনার বিশেষ ক্ষেত্রে সমস্যার সমাধান করে এমন এই ঝাঁকুনিটি দেখুন http://jsfiddle.net/gS9q7/

কৌশলটি হ'ল উভয় উপাদানকে ভাসিয়ে উপাদান ক্রমের বিপরীত করা, প্রথম থেকে ডানদিকে, দ্বিতীয়টি বামে, সুতরাং দ্বিতীয়টি প্রথম প্রদর্শিত হয়।

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

অবশেষে, পিতা বা মাতা করার জন্য একটি clearfix যোগ করতে পারেন এবং আপনার কাজ সম্পন্ন হয় (দেখুন বেহালার সম্পূর্ণ সমাধান জন্য)।

সাধারণত, যতক্ষণ না নিখুঁত অবস্থানের উপাদানটি পিতামাতার উপাদানগুলির শীর্ষে অবস্থান করে ততক্ষণ উপাদানটি ভাসিয়ে আপনি একটি কার্যনির্বাহী খুঁজে পাওয়ার সম্ভাবনা ভাল।

Answer 3

Feela ঠিক আছে তবে আপনিdivযদি নিজেরdivঅবস্থানটি এইরকম করে দেনতবে আপনিকোনও পিতামাতার সাথেচুক্তি করে / সন্তানের সাথে প্রসারিত করতে পারেন:

.parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

এটি আপনার জন্য কাজ করা উচিত।

Answer 4

এটি সমাধান করার জন্য বেশ সহজ উপায় রয়েছে।

আপনাকে কেবল সন্তানের 1 এবং চাইল্ড 2 এর সামগ্রীটি ডিসপ্লে সহ আপেক্ষিক ডিভগুলিতে নকল করতে হবে: পিতামহী বিভাজনের মধ্যে নেই। চাইল্ড 1_1 এবং চাইল্ড 2_2 বলুন। চাইল্ড 2_2 উপরে এবং চাইল্ড 1_1 নীচে রাখুন।

যখন আপনার জিকিউরিটি (বা যাই হোক না কেন) পরম ডিভ বলবে, কেবল সেই তুলনামূলকভাবে ডিভ (চাইল্ড 1_1 বা চাইল্ড 2_2) প্রদর্শনের সাথে সেট করুন: ব্লক এবং দৃশ্যমানতা: লুকানো। আপেক্ষিক শিশুটি এখনও অদৃশ্য থাকবে তবে পিতামাতার দ্বি উচ্চতর করবে।

Comments

এটি আমাকে সঠিক দিকে চিন্তা করতে পেয়েছে। আমার কেস সেটিংস প্রদর্শনটিতে: "আকার ধারক" সামগ্রীতে কোনওটিই ডিভকে আকার নয়, তবে অস্বচ্ছতা: 0, ডিভটিকে সঠিকভাবে মাপ দেয় এবং কোনও অতিরিক্ত জিকোয়ের প্রয়োজন হয় না।

— এডেনকর্বিন

আমি যেভাবে দুটি অনুলিপি ডিভ্স পেয়েছিলাম প্রথমটি হ'ল স্থিতিশীল স্থির সাথে দৃশ্যমান সামগ্রী এবং দ্বিতীয়টি হ'ল দৃশ্যমানের সাথে একটি ডিভ যা সঠিক উচ্চতার সাথে পিতামাতার ডিভকে সব ঠিক রাখে = ডি

— ডায়োগো গার্সিয়া

Answer 5

খাঁটি জাভাস্ক্রিপ্টের সাহায্যে আপনাকে getComputesStyle () পদ্ধতিটি ব্যবহার করে আপনার static positionসন্তানের উপাদানটির উচ্চতা পুনরুদ্ধার করতে হবে এবং তারপরে HTMLElement.style সম্পত্তি ব্যবহার করে সেই একই সন্তানের জন্য পুনরুদ্ধার মানটি সেট করুন set.child1padding-top

---

আমি উপরে বর্ণিত বিষয়গুলির ব্যবহারিক উদাহরণের জন্য নিম্নলিখিত কোড স্নিপেটটি পরীক্ষা করুন এবং চালান :

/* JavaScript */

var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");

var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;

/* CSS */

#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }

<!-- HTML -->

<div id="parent">
    <div class="child1">STATIC</div>
    <div class="child2">ABSOLUTE</div>
</div>

Answer 6

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

Answer 7

এই প্রশ্নটি ফ্লেক্সবক্সের আগে ২০১২ সালে জিজ্ঞাসা করা হয়েছিল। আধুনিক সিএসএস ব্যবহার করে এই সমস্যাটি সমাধানের সঠিক উপায়টি হল একটি মিডিয়া ক্যোয়ারী এবং মোবাইল ডিভাইসগুলির জন্য একটি ফ্লেক্স কলাম বিপরীত। কোন পরম অবস্থান প্রয়োজন।

https://jsfiddle.net/tnhsaesop/vjftq198/3/

এইচটিএমএল:

<div class="parent">
  <div style="background-color:lightgrey;">
    <p>
      I stay on top on desktop and I'm on bottom on mobile
    </p>
  </div>
  <div style="background-color:grey;">
    <p>
      I stay on bottom on desktop and I'm on bottom on mobile
    </p>
  </div>
</div>

সিএসএস:

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

Answer 8

আমি আরও একটি সমাধান নিয়ে এসেছি, যা আমি পছন্দ করি না তবে কাজটি করে ফেলে।

মূলত শিশু উপাদানগুলি এমনভাবে নকল করুন যাতে সদৃশগুলি দৃশ্যমান না হয়।

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

সিএসএস:

.width-calc {
    height: 0;
    overflow: hidden;
}

যদি সেই শিশু উপাদানগুলিতে সামান্য মার্কআপ থাকে তবে তার প্রভাব কম হবে।

Comments

এটি অনুসন্ধান ইঞ্জিনের র‌্যাঙ্কিংয়ে কিছু সমস্যা দিতে পারে

— এমএসচাদেগ

Answer 9

"আপনি হয় স্থির উচ্চতা ব্যবহার করেন বা আপনার জেএস জড়িত হওয়া দরকার" "

জেএস উদাহরণ এখানে:

---------- jQuery জেএস উদাহরণ --------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);

Comments

এই উত্তর প্রস্তাবিত সমাধানের আরও ভাল ব্যাখ্যা এবং দিকনির্দেশ থেকে উপকৃত হতে পারে।

— দানিদেভ

Answer 10

একটি খুব সাধারণ হ্যাক রয়েছে যা এই সমস্যাটিকে সংশোধন করে

এখানে কোডসবক্স রয়েছে যা সমাধানটি চিত্রিত করে: https://codesandbox.io/s/00w06z1n5l

এইচটিএমএল

<div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

সিএসএস

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

আপনি হ্যাক ডিভের অবস্থানের সাথে খেলতে পারেন যেখানে শিশু নিজে অবস্থান করে affect

এখানে একটি স্নিপেট রয়েছে:

html {
  font-family: sans-serif;
  text-align: center;
}

.container {
  border: 2px solid gray;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stuff-the-middle {
  background: papayawhip
    url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
  flex: 1;
}

.parent {
  background: palevioletred;
  position: relative;
}

.hack {
  position: absolute;
  left: 0;
  top:0;
  right: 0;
}
.child {
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

    <div class="container">
      <div class="stuff-the-middle">
        I have stuff annoyingly in th emiddle
      </div>
      <div class="parent">
        <div class="hack">
          <div class="child">
            I'm inside of my parent but absolutely on top
          </div>
        </div>
        I'm the parent
        <br /> You can modify my height
        <br /> and my child is always on top
        <br /> absolutely on top
        <br /> try removing this text
      </div>
    </div>

Answer 11

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

    .my-element {
      position: absolute;
      bottom: 30px;
    }

Comments

এটি কেবল তখনই কাজ করবে যখন আপনি পিতামাতার চূড়ান্ত উচ্চতা জানেন যা আপনি না

— মেশিনডিক্টট

Answer 12

এটি @ ক্রিসিসির পরামর্শ অনুসারে একেবারেই অনুরূপ। এটি নিখুঁত অবস্থানযুক্ত উপাদানটি ব্যবহার করছে না, তবে একটি আপেক্ষিক উপাদান। আপনার জন্য কাজ করতে পারে

<div class="container">
  <div class="my-child"></div>
</div>

এবং আপনার সিএসএস এর মত:

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

Answer 13

পরবর্তী পদ্ধতি বিবেচনা করুন:

সিএসএস:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

আপনি যেহেতু ডিভগুলি পুনরায় স্থাপনের চেষ্টা করছেন সিএসএস গ্রিড বিবেচনা করুন

Answer 14

পরম অবস্থান নিজেদের নিকটতম পূর্বপুরুষ যে স্ট্যাটিক্যালি স্থান না হয় (বিরুদ্ধে দেখেন position: static), তাই যদি আপনি একটি প্রদত্ত পিতা বা মাতা বিরুদ্ধে স্থান একটি পরম দৃশ্য, পিতা বা মাতা সেট চান positionকরতে relativeএবং সন্তানের positionজন্যabsolute

Answer 15

এটি চেষ্টা করুন, এটি আমার জন্য কাজ করা হয়েছিল

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

এটি সন্তানের উচ্চতা পিতামাতার উচ্চতায় সেট করবে

Comments

দুর্দান্ত সমাধান!

— আলেকজান্ডার চেরেডনিকেনকো

পছন্দ করুন

— উইকিউইলস