পিতামাতার উচ্চতা উল্লেখ না করে কীভাবে শিশু ডিভকে পিতামাতার দ্বিগুণের 100% হতে বাধ্য করা যায়?

Question

নিম্নলিখিত কাঠামো সহ আমার একটি সাইট রয়েছে:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

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

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

আমি কীভাবে নেভিগেশনটিকে উল্লম্বভাবে স্কেল করতে পারি যাতে এর উচ্চতা সামগ্রী ডিভের উচ্চতার সমান হয়, কোনও পৃষ্ঠা লোড হয় না কেন?

Comments

পিতামাতার উপর প্রদর্শন টেবিল এবং সন্তানের উপর টেবিল-সেল প্রদর্শন করুন। এটি পিতামাতার যতক্ষণ না শিশু হবে child দেখুন stackoverflow.com/q/22712489/3429430

— user31782

আপনি কেবল display: flex; align-items: stretch;ডিভ # মেইনের জন্য সেট করতে পারেন । এবং ডিভ # সামগ্রীর জন্য ব্যবহার করবেন নাheight: 100%

— ইগোর

Answer 1

দ্রষ্টব্য : এই উত্তরটি ফ্লেক্সবক্স স্ট্যান্ডার্ডকে সমর্থন না করে লিগ্যাসি ব্রাউজারগুলির ক্ষেত্রে প্রযোজ্য। আধুনিক পদ্ধতির জন্য দেখুন: https://stackoverflow.com/a/23300532/1155721

---

আমি আপনাকে ক্রস-ব্রাউজার সিএসএস এবং হ্যাকস সহ সমান উচ্চতা কলামগুলিতে একবার নজর দেওয়ার পরামর্শ দিই ।

মূলত, ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ উপায়ে সিএসএসের সাহায্যে এটি করা তুচ্ছ নয় (তবে টেবিলগুলির সাথে তুচ্ছ) সুতরাং নিজেকে উপযুক্ত প্রি-প্যাকেজযুক্ত সমাধানটি সন্ধান করুন।

এছাড়াও, আপনি 100% উচ্চতা বা সমান উচ্চতা চান কিনা সে সম্পর্কেও উত্তর পরিবর্তিত হয়। সাধারণত এটি সমান উচ্চতা। এটি যদি 100% উচ্চতা হয় তবে উত্তরটি কিছুটা আলাদা।

Comments

আপনি কোনও বর্ডার আঁকেন না হওয়া পর্যন্ত এটি দুর্দান্ত সমাধানের মতো দেখায় border:1px solid blueযেমন container2: নীল সীমানাটি প্রথম দুটি কলামে রয়েছে, দ্বিতীয় কলামে নয় কেবল আপনি আশা করেছিলেন।

— জুলিয়েন ক্রোনেগ

@ বিফ্রিটজ, আরও ভাল সমাধানটি ব্যবহার করা হবেdisplay:table

— সিলার

Answer 2

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

display: flex;

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

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

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Comments

আইই 11 ফ্লেক্সবক্স এবং হাইটের সাথে দুর্দান্ত খেলছে না। এখানে "জানা সমস্যাগুলি" তে ক্লিক করুন: caniuse.com/#feat=flexbox

— adamdport

ওয়েল @SuperUberDuper আপনি এই বুটস্ট্র্যাপ এটা ব্যবহার করতে পারেন: jsfiddle.net/prdwaynk কিন্তু আমি যদি তুমি হতাম, আমি ভিত যা flexbox সঙ্গে উৎপাদন প্রস্তুত ব্যবহার করবেন: foundation.zurb.com/sites/docs/xy-grid.html BS4 এছাড়াও ফ্লেক্সবক্স থাকবে, তবে এটি এখনও আলফাতে রয়েছে এবং আমি মনে করি ফাউন্ডেশন যাইহোক ভাল।

— আইফি

আপনি যদি align-items: centerসেই আইটেমটি ব্যবহার করেন তবে আপনার প্রসারিত হওয়া প্রয়োজনalign-self: normal

— ডমিনিক

এটি সঠিক উত্তর নয়, এর জন্য পিতামাতার উচ্চতা নির্ধারণ করা দরকার। প্রশ্নটি বলেছে 'পিতামাতার উচ্চতা উল্লেখ না করে?'

— স্কুরাজেড

@ আইফিকে নিম্নচাপ দেওয়া কারণ দেখা যাচ্ছে যে আপনি মূল প্রশ্নের পাঠ্যটিতে ঠিক সেখানে পিতামাতাকে উচ্চতা নির্ধারণ না করার বিষয়ে অংশটি দেখেন নি, তবুও আপনার "সমাধান" ঠিক তেমনটি করে।

— টাইলারিজম

Answer 3

এটি হতাশার বিষয় যা ডিজাইনারদের সাথে সর্বদা মোকাবেলা করা হয়। কৌশলটি হ'ল আপনাকে আপনার সিএসএসে BODY এবং HTML এ উচ্চতা 100% নির্ধারণ করতে হবে।

html,body {
    height:100%;
}

এই আপাতদৃষ্টিতে অর্থহীন কোডটি ব্রাউজারে 100% এর অর্থ কী তা বোঝানো হয়। হতাশাজনক, হ্যাঁ, তবে এটি সহজতম উপায়।

Comments

এটি সর্বদা কাজ করে না, উদাহরণস্বরূপ যদি আপনার যদি কোনও পরম্পরাযুক্ত অবস্থানের অভ্যন্তরে কোনও আপেক্ষিক অবস্থানের উপাদান থাকে তবে এটি আর লেআউটকে জোর করে না।

— টিম

এছাড়াও, আপনি উইন্ডো (FIREFOX v28 দেখা যায়) ডান দিকে স্ক্রলবার পরিত্রাণ পেতে চান, জানালা কিছু হাঁফ ছাড়বার সুযোগ: html { height: 100%; } body { height: 98%; }।

— ক্রিস মিডলটন

এটি কেবলমাত্র তখনই কার্যকর হয় যদি সমস্ত পিতা-মাতার উচ্চতা 100% থাকে তবে কেবলমাত্র এইচটিএমএল এবং দেহ সেট করা যথেষ্ট নয়, সমস্ত পিতামাতার উচ্চতার সংজ্ঞা দেওয়া উচিত।

— RaduM

Answer 4

আমি দেখতে পাচ্ছি যে দুটি কলামটি ভাল কাজ করার display: table-cell;পরিবর্তে সেট করে float: left;।

Comments

এমএস নিজেরাই আর এটি সমর্থন করে না, যদি এটি কাউকে তাদের ক্লায়েন্টদের বোঝাতে সহায়তা করে ...

— হেরাল্ডমোনকি

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। সময় বদলে গেছে, এই উত্তরটি সমস্ত ব্রাউজারগুলিতে কাজ করে (সাফারি 5.1.17-এ ছোট ছোট বিচক্ষণতার সাথে)। সিএসএসের দুটি লাইন এবং আপনি তাত্ক্ষণিকভাবে এমন প্রভাব ফেলেছেন যা আপনি খুঁজছেন এমন কোনও ড্র না করেই আমি ভাবতে পারি।

— কলমেটওয়ান

এই উত্তর উত্তোলন। আপনার পিঠে এটি ছেলেদের মধ্যে রাখুন!

এটি সেরা উত্তর। হ্যাঁ আমরা এটি করার জন্য একটি টেবিল তৈরি করতে পারি, তবে এটির ট্যাবুলার ডেটা নয়, পরিবর্তে আমরা ডিভগুলি এমনভাবে ব্যবহার করি যেন তারা টেবিল কোষ ... উজ্জ্বল!

— ডেরোকরিয়ান

এটি আসলে আমাকে ভিন্ন দৃশ্যের জন্য সঠিক দিকে নিয়ে গেছে। যদি কেউ ফায়ারফক্স বা এজে ফ্লেক্স পাত্রেও বর্গক্ষেত্র ডিভ নিয়ে কাজ করার জন্য লড়াই করে যাচ্ছেন তবে কেবলমাত্র উপাদানটি প্রদর্শন করার আগে: টেবিলটি সেট করতে ভুলবেন না। আমাকে জিজ্ঞাসা করবেন না তবে এটি এটি ঠিক করে দেয়।

— সিজিডো

Answer 5

আপনি যদি অপ্রত্যাশিতভাবে সংক্ষিপ্ত সামগ্রী ডিভের ঘটনায় নেভিগেশন ডিভি ক্লিপ করা আপত্তি না করেন তবে কমপক্ষে একটি সহজ উপায় আছে:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

অন্যথায় অদৃশ্য -কলামগুলির কৌশল রয়েছে।

Comments

একটি টন ধন্যবাদ, আপনি আমার দিন বাঁচিয়েছেন। জানেন না যে কেউ উপরের এবং নীচে উভয়ই সংজ্ঞায়িত করতে পারে এবং এটি এইভাবে কাজ করবে।

— রাবিশ

এটি ধারকটির সামগ্রীটিকে এর আকার পরিবর্তন করা বন্ধ করবে।

— ড্রিমওয়েভ

+1 কারণ এটি ওপির প্রশ্নটিকে "প্যারেন্টের উচ্চতা উল্লেখ না করে পিতামাতার ডিভের 100% কীভাবে বাধ্য করা যায়?" আমার সমস্যাটির জন্য কলামগুলির প্রয়োজন নেই (যা প্রশ্নের বিবরণে উল্লেখ করা হয়েছে তবে প্রধান শিরোনামে নয়) বরং একটি ডিভের পিছনে একটি ডিভ রয়েছে। এই উত্তর দুটি প্রয়োগেই কাজ করে in

— লুক

এটি নির্বাচিত উত্তর হওয়া উচিত

— গ্যাব্রিয়েল

Answer 6

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

Comments

আমি অবশ্যই বলব যে আমি এই ধরণের সমাধান খুঁজছিলাম। মৃত সরল এবং এতটাই সুস্পষ্ট যে কেউ এটিকে বুঝতে পারেনি। অভিনন্দন @ রোমান!

— গ্রেগেরি

Answer 7

jQuery ব্যবহার:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Comments

Math.max()এখানে আপনার বন্ধু হতে হবে।

— অ্যালেক্স

আমার পক্ষে সব ক্ষেত্রে সিএসএস কাজ করতে পারা যায় নি খুব দ্রুত একটি দ্রুত সমাধানের প্রয়োজন। এটি সর্বাধিক স্ট্যান্ডার্ড পদ্ধতির নাও হতে পারে তবে এটি কাজটি ঠিকঠাক করেছে। ধন্যবাদ! : -]

জিকুয়েরির cssফাংশনটি ব্যবহার করার সময় , আপনি সাধারণত খাঁটি সিএসএস সমাধান ব্যবহার করার সময় যেমন পর্দা এবং মুদ্রণ মিডিয়াগুলির মধ্যে পার্থক্য করতে পারবেন না। সুতরাং, আপনার মুদ্রণের সমস্যা হতে পারে।

— জুলিয়েন ক্রোনেগ

Answer 8

নীচের মার্জিনটি 100% করার চেষ্টা করুন।

margin-bottom: 100%;

Comments

বা প্যাডিং-নীচে: 100%; এটি সুনির্দিষ্ট নয় তবে এটি কিছু পরিস্থিতিতে ভাল কাজ করে।

— জেসন

প্যাডিং-বটম আমার ক্ষেত্রে কৌশলটি করে। এই সমাধানটি @ রোমান কুন্তেই যে পোস্ট করেছেন তার সাথে খুব মিল।

— গ্রেগেরি

Answer 9

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

তাকান এই উদাহরণে ।

Comments

এটি হ'ল আমি যা করছিলাম, একটি উত্তর যুক্ত করতে চেয়েছিলাম। আমিও ব্যবহার করছিলাম height: 100%তবে এটির দরকার নেই।

— jcubic

Answer 10

height : <percent>শীর্ষ স্তরের পিক্সেল, ইএমএস ইত্যাদিতে নির্দিষ্ট উচ্চতার সাথে নির্দিষ্ট শতাংশ উচ্চতার সাথে সমস্ত পিতামাতার নোডগুলি কেবল তখনই কাজ করবে। এইভাবে, উচ্চতাটি আপনার উপাদানটিতে ক্যাসকেড হবে।

পৃষ্ঠার উচ্চতাটি আপনার নোডগুলিতে ক্যাসকেড করার জন্য @ ট্র্যাভিস হিসাবে পূর্বে উল্লিখিত হিসাবে আপনি 100% থেকে এইচটিএমএল এবং শরীরের উপাদানগুলি নির্দিষ্ট করতে পারেন।

Answer 11

দীর্ঘ অনুসন্ধান এবং চেষ্টা করার পরেও আমার সমস্যার সমাধান ছাড়া আর কিছুই হয়নি

style = "height:100%;"

শিশুদের উপর ডিভ

এবং পিতামাতার জন্য এটি প্রয়োগ করুন

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

এছাড়াও, আমি বুটস্ট্র্যাপ ব্যবহার করছি এবং এটি আমার জন্য প্রতিক্রিয়াটিকে দূষিত করে না।

Comments

আমার flex-direction: column;জন্য কাজ করার জন্য আমাকে এটি সরিয়ে ফেলতে হয়েছিল।

— রিচার্ড হেজেস 15

Answer 12

এই নিবন্ধে বর্ণিত পদ্ধতিটির ভিত্তিতে আমি তৈরি করেছি ess

এইচটিএমএল:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

কম:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

Answer 13

যোগ display: gridঊর্ধ্বতন

Answer 14

আমি জানি প্রশ্নটি তৈরি হওয়ার পরে এটি অনেক দীর্ঘ সময় হয়েছে, তবে আমি একটি সহজ সমাধান পেয়েছি এবং ভেবেছিলাম যে কেউ এটি ব্যবহার করতে পারে (দরিদ্র ইংরেজির জন্য দুঃখিত)। এখানে এটা যায়:

সিএসএস

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

এইচটিএমএল

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

সহজ উদাহরণ। নোট করুন যে আপনি প্রতিক্রিয়াশীল হতে পারেন।

Comments

ওহ, আমি ভুলে গিয়েছি: আপনি যদি মাঝের দিকের বাইরের দিকের সামগ্রীটি প্রান্তিক করতে চান তবে কেবল "উল্লম্ব-সারিবদ্ধ: শীর্ষ" থেকে "উল্লম্ব-সারিবদ্ধ: মাঝখানে" পরিবর্তন করুন।

— পলা ফ্লেক

Answer 15

আমার সমাধান:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

Answer 16

প্রশ্নের শিরোনাম এবং বিষয়বস্তুতে কিছুটা দ্বন্দ্ব রয়েছে। শিরোনামটি পিতামাতার ডিভের কথা বলে, তবে প্রশ্নটি এটিকে শব্দ করে তোলে আপনি দুটি ভাইবাল ডিভ (ন্যাভিগেশন এবং সামগ্রী) একই উচ্চতার হতে চান।

আপনি কি (ক) নেভিগেশন এবং সামগ্রী উভয়ই মূলের উচ্চতা 100% করতে চান, বা (খ) ন্যাভিগেশন এবং সামগ্রীগুলি একই উচ্চতা হতে চান?

আমি ধরে নিব (খ) ... যদি তা হয় তবে আমার বর্তমান পৃষ্ঠার কাঠামো (কমপক্ষে, খাঁটি সিএসএস এবং কোনও স্ক্রিপ্টিং নয়) দিয়ে আপনি এটি করতে সক্ষম হবেন বলে আমি মনে করি না। আপনার সম্ভবত এমন কিছু করার দরকার হবে:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

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

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

Answer 17

[অন্য উত্তরে ডমিটির কম কোডটি উল্লেখ করে] আমি অনুমান করছি যে এটি কোনও ধরণের "সিউডো কোড"?

আমি যা বুঝি সেগুলি থেকে ছদ্মবেশী কলামগুলি ব্যবহার করার চেষ্টা করুন যা কৌশলটি করা উচিত।

http://www.alistapart.com/articles/fauxcolumns/

আশাকরি এটা সাহায্য করবে :)

Comments

উত্তরগুলি বাছাইয়ের উপর নির্ভর করে "" এটি "কী বোঝায় তা বলা শক্ত ... আমি অনুমান করছি এটি দিমিত্রি কোড সম্পর্কে about এইভাবে, এই মন্তব্যটি তার উত্তরের নীচে একটি মন্তব্যের সাথে সম্পর্কিত! এবং, আপনার তথ্যের জন্য, এটি ছদ্ম-কোড নয়, এটি কম ভাষায় কোড, পদ্ধতিগত উপায়ে সিএসএস সংজ্ঞায়নের একটি উপায়।

— ফিলিহো

Answer 18

এই কৌশলটি কাজ করে: আপনার এইচটিএমএল বিভাগে একটি চূড়ান্ত শৈলীর সাথে একটি চূড়ান্ত উপাদান যুক্ত করা: উভয়;

    <div style="clear:both;"></div>

এর আগে সমস্ত কিছু উচ্চতার অন্তর্ভুক্ত করা হবে।

Answer 19

দান position: absolute;সন্তানকে আমার ক্ষেত্রে কাজ

Answer 20

তুমি ব্যাবহার কর সিএসএস ফ্লেক্সবক্স করেন

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Answer 21

সিএসএসে প্রয়োগ করা সিএসএস ফ্লেক্সবক্স এবং গ্রিডের পর থেকে এই উত্তর আর আদর্শ নয়। তবে এটি এখনও একটি কার্যকরী সমাধান

একটি ছোট স্ক্রিনে আপনি সম্ভবত উচ্চতা অটো রাখতে চান যেহেতু কল 1, কল 2 এবং কল 3 একে অপরের সাথে সজ্জিত রয়েছে।

তবে মিডিয়া ক্যোয়ারী ব্রেকআপপয়েন্টের পরে আপনি কলস সমস্ত কলামের জন্য সমান উচ্চতা সহ একে অপরের পাশে উপস্থিত হতে চান।

1125 পিক্স উইন্ডো প্রস্থের ব্রেক ব্রেকপয়েন্টের কেবলমাত্র উদাহরণ যা পরে আপনি সমস্ত কলাম একই উচ্চতায় সেট করতে চান।

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

আপনার প্রয়োজনে আপনি অবশ্যই আরও ব্রেকপয়েন্ট সেট করতে পারেন।

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

Answer 22

আমার একই সমস্যা ছিল, এটি হাকাম ফস্টকের জবাবের ভিত্তিতে কাজ করেছিল, আমি একটি ছোট উদাহরণ তৈরি করেছি, কিছু ক্ষেত্রে এটি পিতামহীন পাত্রে যোগ না করে display: flex;এবং কাজ না করে কাজ করতে পারেflex-direction: column;

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

Answer 23

যেমন আগে দেখানো হয়েছে, ফ্লেক্সবক্স সবচেয়ে সহজ। যেমন।

#main{ display: flex; align-items:center;}

এটি সমস্ত শিশু উপাদানকে পিতামণ্ডলের উপাদানগুলির মধ্যে কেন্দ্রে প্রান্তিককরণ করবে।

Comments

এটি প্রশ্নের উত্তর দেয় না, তারা সমান উচ্চতা চায়, বিষয়বস্তুকে কেন্দ্র করে না

— রায়ান এম

Answer 24

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

থেকে:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

বুটস্ট্র্যাপ জানায় তবে এটি ব্যবহারের জন্য আপনার বুটস্ট্র্যাপের দরকার নেই। এই পুরানো প্রশ্নের উত্তর দেওয়া, যেমন এটি আমার পক্ষে কাজ করেছিল এবং বাস্তবায়ন করা বেশ সহজ বলে মনে হচ্ছে।

এটি এই প্রশ্নের উত্তরটি আমি দিয়েছিলাম

Answer 25

position: absoluteসামগ্রীর ধারক এবং এর উপর ভিত্তি করে এখানে পুরানো ফ্যাশন ডেমোposition: relative পিতামাতার ধারকের ।

এটি করার আধুনিক উপায় হিসাবে - ফ্লেক্স বক্সগুলি সেরা।

Answer 26

এটি করার সহজতম উপায় হ'ল এটি জাল। ২০০৪ সাল থেকে ড্যান সিডারহোমের এই নিবন্ধের মতো একটি তালিকা সংযোজন বছরের পর বছর ধরে এটির ব্যাপকভাবে আচ্ছাদন করেছে ।

আমি সাধারণত এটি কীভাবে করি তা এখানে:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

আপনি সহজেই এই ডিজাইনে অন্য ডিভিউতে # কনটেনারটি মোড়ানো, শিরোনাম ডিভকে # কনটেইনার ভাইবোন হিসাবে এম্বেড করে এবং মার্জিন এবং প্রস্থের শৈলীর প্যারেন্ট পাত্রে সরানোর মাধ্যমে সহজেই এই নকশায় একটি শিরোনাম যুক্ত করতে পারেন। এছাড়াও, সিএসএস একটি পৃথক ফাইলে স্থানান্তর করা উচিত এবং ইনলাইন না রাখা, ইত্যাদি ইত্যাদি অবশেষে, clearfix বর্গ পাওয়া যাবে positioniseverything ।