সিএসএস কীভাবে ডিভি উচ্চতা 100% বিয়োগের এনপিএক্স সেট করবেন

199

আমার একটি মোড়ক ডিভ রয়েছে যা একে অপরের পাশে 2 টি ডিভিডকে সংযুক্ত করে। এই ধারকটির উপরে আমার একটি ডিভ রয়েছে যাতে আমার শিরোনাম থাকে। মোড়কের ডিভটি শিরোনামের উচ্চতা 100% বিয়োগের হতে হবে। শিরোনামটি প্রায় 60 পিক্সেল। এটা ঠিক আছে। সুতরাং আমার প্রশ্নটি হল: আমি কীভাবে আমার মোড়ক ডিভিটি উচ্চতাটি 100% বিয়োগ করে 60 পিক্স করব?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

css height

— Martijn
সূত্র

16

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

— সমরজিৎ সামন্ত

79

এখানে একটি ওয়ার্কিং সিএসএস রয়েছে, ফায়ারফক্স / আইই 7 / সাফারি / ক্রোম / অপেরা এর অধীনে পরীক্ষিত।

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"ওভারফ্লো-ওয়াই" ডাব্লু 3 সি-অনুমোদিত নয়, তবে প্রতিটি বড় ব্রাউজার এটি সমর্থন করে। আপনার দুটি ডিভ্স # বাম এবং # ডান যদি তাদের বিষয়বস্তু খুব বেশি হয় তবে একটি উল্লম্ব স্ক্রোলবারটি প্রদর্শন করবে।

এটি আই 7 এর অধীনে কাজ করার জন্য আপনাকে একটি ডক্টপিইপি যুক্ত করে স্ট্যান্ডার্ডস-কমপ্লায়েন্ট মোডটি ট্রিগার করতে হবে:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

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

— Alsciende
সূত্র

এটি এফএফ এ কাজ করে তবে আমি এটি আই 7 এর অধীনে কাজ করতে পারি না। আমি কেবল 'শিরোনাম' কোড দেখতে পাচ্ছি: <div id = "header"> Header </div> <div id = "wrapper"> <div id = "বাম"> বাম </ div> <div id = "ডান"> ডান </ div> </ div>

— মার্টিজনে

আপনি মান মেনে চলার মোড ট্রিগার করেছেন? আমি আমার প্রতিক্রিয়াতে একটি উদাহরণ পৃষ্ঠা যুক্ত করব।

— অ্যালসিএন্ডে

1

এছাড়াও, যদি আপনাকে পৃষ্ঠাগুলির মাঝামাঝি বা অন্য কোথাও এই ডিভগুলি অবস্থানের প্রয়োজন হয় তবে কেবল সেগুলি একটি ধারক ডিভের মধ্যে আবদ্ধ করুন এবং ধারকটিতে সেট position: relativeকরুন। তারপরে আপনার পাতায় যে কোনও জায়গা ধারক রাখুন।

— মিচিফ

অভ্যন্তরীণ ডিভ সম্পর্কে কী হবে, উদাহরণস্বরূপ # বামের ভিতরে যদি আমি 40% এবং 60% এর संबंधित উচ্চতা সহ 2 ডিভ চাই?

— TecHunter

Px কেন 0 মান পরামিতিগুলিতে নির্দিষ্ট করা হয়েছিল তার কোনও নির্দিষ্ট কারণ আছে?

— ক্যাসান্দ্রা

274

CSS3 এ আপনি ব্যবহার করতে পারেন

height: calc(100% - 60px);

— libjup
সূত্র

25

"-" চিহ্নের আগে এবং পরে আপনার কাছে জায়গা আছে তা নিশ্চিত করুন। "-" চিহ্নের আগে ফায়ারফক্সের স্থান থাকা দরকার।

— কোডলার

7

নিখুঁত। আমি জানতাম না CSS3 এটি করতে পারে।

— টম বিচ

কি দারুন! অবিকল আমি যা চেয়েছিলাম ধন্যবাদ।

— সন্ধু

1

এটি দুর্দান্ত

— মিরকো

47

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

অন্যান্য আধুনিক ব্রাউজারগুলির জন্য, এই CSS ব্যবহার করুন:

position: absolute;
top: 60px;
bottom: 0px;

— হারুন দিগুল্লা
সূত্র

সাইটটি কেবল আই 7 7 সামঞ্জস্যপূর্ণ। আমি যখন উচ্চতা ব্যবহার করি: 100% এবং শীর্ষ: 60px; আমি এখনও একটি স্ক্রোলবার het। আমি 60px ডাউন স্ক্রোল করতে পারেন।

— মার্টিজন

4

কোনও উচ্চতা উল্লেখ করবেন না, শীর্ষ এবং নীচে ব্যবহার করুন এবং ব্রাউজারটিকে উচ্চতা গণনা করতে দিন।

— অ্যারন দিগুল্লা

তবে আমি চাই যে আমার পৃষ্ঠার সর্বোচ্চ উচ্চতা 100% বিয়োগ 60px হবে; যদি বিষয়বস্তু এর চেয়ে বড় হয়, আমি ডিভিতে ওভারফ্লো ব্যবহার করে স্ক্রোলবারগুলি চাই: স্ক্রোল;

— মার্টিজন

4

একটি স্ক্রোলবারের জন্য, মোড়কের ভিতরে একটি ডিভ যুক্ত করুন যা এটি পুরোপুরি পূরণ করে এবং এটি ওভারফ্লো করে তোলে: স্ক্রোল;

— অ্যারন দিগুল্লা

নোট করুন যে আই 7-তে বাগের কারণে এটি এখনও ব্যর্থ হতে পারে। আপনি যদি এটি কাজ করতে না পারেন তবে জাভাস্ক্রিপ্ট ব্যবহার করুন। আমি জানি, আপনি এটি পছন্দ করেন না, তবে বিজড়িত বাগের সাথে লড়াই করে এক সপ্তাহের কাজের তুলনায় এটি ওজন করুন।

— অ্যারন ডিজুল্লা

6

দুর্দান্ত ... এখন আমি% তিনি তিনি ব্যবহার করা বন্ধ করে দিয়েছেন ... নীচে দেখানো প্রধান পাত্রে ব্যতীত:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

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

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

আমি এটি সমস্ত পরিচিত ব্রাউজারগুলিতে পরীক্ষা করেছি এবং ভাল কাজ করছি। এভাবে কি কোনও ত্রুটি রয়েছে?

— Jayaveer
সূত্র

4

আপনি উচ্চতার মতো কিছু করতে পারেন : ক্যালক (100% - nPx); উদাহরণস্বরূপ উচ্চতা: ক্যালক (100% - 70px);

— DRB
সূত্র

2

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

কম ব্যবহার করার সময় নিশ্চিত করুন

height: ~calc(100% - 60px);

অন্যথায় কম এটি সঠিকভাবে সংকলন করতে যাচ্ছে না

— দধিচ সৌরভ
সূত্র

0

এটি প্রশ্নের উত্থাপিত হিসাবে ঠিক উত্তর দেয় না, তবে এটি একই ভিজ্যুয়াল এফেক্ট তৈরি করে যা আপনি অর্জন করার চেষ্টা করছেন।

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>

— নোয়েল ওয়াল্টার্স
সূত্র

0

এই উদাহরণে আপনি বিভিন্ন অঞ্চল সনাক্ত করতে পারেন:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>

— রেনজো সিওট
সূত্র

0

আমি এখনও পোস্ট করা এই মত কিছু দেখিনি, কিন্তু আমি ভেবেছিলাম আমি এটি এখানে রাখি।

<div class="main">
<header>Header</header>
<div class="content">Content</div>

তারপরে সিএসএস:

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

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

এখানে একটি কার্যনির্বাহী jsfiddle আছে

দ্রষ্টব্য: এর জন্য ব্রাউজারের সামঞ্জস্যতা কী তা আমার কোনও ধারণা নেই। আমি সবেমাত্র বিকল্প সমাধান নিয়ে খেলছিলাম এবং এটি ভালভাবে কাজ করেছে বলে মনে হয়েছিল।

— FreedomMan
সূত্র

-1

একটি বাহ্যিক মোড়ক ডিভি সেটটি 100% এ ব্যবহার করুন এবং তারপরে আপনার অভ্যন্তরের মোড়ক ডিভিও 100% এখন এর সাথে তুলনামূলকভাবে হওয়া উচিত।

আমি নিশ্চিতভাবে ভেবেছিলাম এটি আমার পক্ষে কাজ করে, তবে দৃশ্যত:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>

— কেড রক্স
সূত্র

একটি উদাহরণ দিতে পারেন। আমি বুঝতে পারছি না

— মার্তিজন

আমি যা ভাবছিলাম তা পোস্ট করেছিলাম, তবে আমি তাড়াতাড়ি / দেরিতে এটি কাজ করতে পারি না। আমি যদি আরও কিছুটা ঘুম পাই।

— ক্যাড রক্স 10

-1

আপনি যদি নিখুঁত অবস্থান এবং সমস্ত জাজ ব্যবহার করতে না চান, তবে এখানে আমি স্থির করতে চাই:

আপনার এইচটিএমএল:

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

আপনার সিএসএস:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}

— scotsqueakscoot
সূত্র

1

আমি মনে করি না এটি প্রত্যাশার মতো কাজ করে। প্রথম #headerহওয়া উচিত margin-top:-60px;। দ্বিতীয়ত, এর height:100%অর্থ হ'ল মার্জিন, প্যাডিং এবং সীমান্তগুলি সহ নয়, প্যারেন্ট উপাদানগুলির উচ্চতার 100% উচ্চতা হবে। আপনার স্ক্রোল সেটিংসের উপর নির্ভর করে, এটি হয় স্ক্রোল বারগুলি প্রদর্শিত হতে পারে বা আপনার সামগ্রী ক্রপ করা হবে।

— কিলোস