সিএসএসে আমি প্রস্থ = 100% - 100px কীভাবে করতে পারি?

153

সিএসএসে, আমি কীভাবে এটি করতে পারি:

width: 100% - 100px;

আমি অনুমান করি এটি মোটামুটি সহজ তবে উদাহরণটি পাওয়া খুব কঠিন।

html css

— fmsf
সূত্র

1

যুক্ত লিঙ্কিত প্রশ্ন স্ট্যাকওভারফ্লো / প্রশ্নগুলি / ১১১৯৯৩৩৩৩/২ একটি আকর্ষণীয়, তবে পুরোপুরি পশ্চাদপটে সামঞ্জস্যপূর্ণ উত্তর দেয় না, সম্ভবত আপনিও সেদিকে নজর দিতে চাইবেন।

— 11684

5

এমন যে কেউ এই প্রশ্নের অতিক্রম জন্য চাদ বললেন যে আধুনিক ব্রাউজারে সমর্থন width: calc(100% - 100px);এটি ডাউন কয়েক উত্তর এবং আমি আশা করি প্রশ্নকর্তা তার প্রশ্ন :) :) আপডেট হবে

— অ্যান্ডার্স এম

277

আধুনিক ব্রাউজারগুলি এখন এগুলি সমর্থন করে:

width: calc(100% - 100px);

সমর্থিত ব্রাউজার সংস্করণ চেকআউটের তালিকাটি দেখতে: আমি কী সিএসএস ইউনিট মান হিসাবে ক্যালক () ব্যবহার করতে পারি?

একটি jQuery ফ্যালব্যাক রয়েছে : CSS প্রস্থ: ক্যালক (100% -100px); jquery ব্যবহার বিকল্প

— মত্স্যবিশেষ
সূত্র

13

আমি যখন দেখলাম calc(100% - 6px)উদাহরণস্বরূপ এটি প্রদর্শিত হচ্ছে calc(94%), আমাকে এটি অনুসরণ করে width: calc(~"100% - 6px");

— এড়িয়ে চলতে হয়েছিল

12

সচেতন হন, আপনার অবশ্যই -(বা +) চরিত্রের চারপাশে সাদা স্থান থাকতে হবে । এটি কাজ করে: calc(100% - 100px); এবং এটি করে না:calc(100%-100px);

— ফ্রিফালার

আমি একটু অবাক হয়েছি উপাদানটির প্যাডিংটি স্বয়ংক্রিয়ভাবে 2x বিয়োগ করার কোনও বিকল্প নেই, যা সাধারণত একটি সাধারণ সাধারণ ব্যবহারের জায়গা হয়ে থাকে। উদাহরণস্বরূপ, আমার কাজ শেষ হয়েছে এবং যদি এটি সংশোধন করতে হয় তবে এখন দুটি জায়গায় padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);পরিবর্তন 0.25emকরতে হবে।

— সিএনটি

অনেক ধন্যবাদ, এটিও উল্লেখ করতে চাই যে এটি সংযোজনের জন্য কাজ করে: (100% + 100px)

— ভিক্টর মেলগ্রেন

99

আপনি একটি সঙ্গে একটি ডিভ নীড় margin-left: 50px;এবং margin-right: 50px;ভিতরে <div>করতে পারেনwidth: 100%; ?

— আরিক টেনিক
সূত্র

4

প্রস্থ: ক্যালক (100% - 100px); পরিবর্তে এটি সঠিক উত্তর।

— সুশান

17

আপনি এটি চেষ্টা করতে পারেন ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

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

vw: ভিউপোর্ট প্রস্থ

vh: ভিউপোর্টের উচ্চতা

— বারে çıracçı
সূত্র

প্রথম সমাধানটি সঠিক, ধারকটি উইন্ডো নাও হতে পারে এবং তাই 100

— ডিগ্রিএইচও

1

আমি যখন calc(100% - 6px)উদাহরণস্বরূপ এটি প্রদর্শিত calc(94%)width: calc(~"100% - 6px");

— হচ্ছিলাম

4

আমার কোড এবং এটি আই 6 এর জন্য কাজ করে:

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

এখানে চিত্র বর্ণনা লিখুন

— lbsweek
সূত্র

6

জাভাস্ক্রিপ্ট কীসের জন্য?

— ফয়েজ

3

আপনার সামগ্রী ডিভের জন্য আপনার একটি ধারক থাকা দরকার যা আপনি 100% - 100px হতে চান

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

</div>আপনার সামগ্রীর ডিভিটি উপচে পড়লে শেষের ঠিক আগে আপনাকে একটি ক্লিয়ারিং ডিভ যুক্ত করতে হবে ।

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

— aleemb
সূত্র

1

এটি কাজ করবে না। সামগ্রীর প্রস্থ হবে 100%: jsfiddle.net/cuezK/1

— gille3

2

বডি মার্জিনকে 0 এ সেট করা, বাহ্যিক ধারকটির প্রস্থ 100% করা এবং 50px বাম / ডান মার্জিন সহ একটি অভ্যন্তরীণ পাত্রে ব্যবহার করা কার্যকর বলে মনে হচ্ছে।

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

— tvanfosson
সূত্র

2

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

এইচটিএমএল:

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

CSS:

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

অবশ্যই আপনার ইনডেন্টেশন অনুসারে আপনি "শীর্ষ" এবং "ডান" মানগুলি সংশোধন করতে পারেন। উৎস

— আর্টুর লগইনভ
সূত্র

2

আমি যখন সমস্ত জায়গাগুলি পরীক্ষা করেছিলাম তখনই এটি আমার পক্ষে কাজ শুরু করে। সুতরাং, এটি এর মতো কাজ করে না: width: calc(100%- 20px)বা calc(100%-20px)এবং পুরোপুরি কাজ করে width: calc(100% - 20px)।

— অ্যালিনা বেবিচেভা
সূত্র

1

আপনি কি করতে পারেন:

margin-right: 50px;
margin-left: 50px;

সম্পাদনা: আমার সমাধানটি ভুল। আরিক টেনইক পোস্ট করা সমাধানটি 100% প্রস্থের সাথে একটি ডিভি ব্যবহার করার পরামর্শ দিয়েছিল এবং এর পরে মার্জিনগুলি ব্যবহার করে অন্য ডিভের বাসা বাঁধে more

— টিনা ওরুজি
সূত্র

3

আপনি যদি এটি করেন তবে মোট প্রস্থটি 100% + 100px হয়ে যাবে?

— অ্যাডাম ক্রুমে

: ও (আমি দুঃখিত। আমি কি আমার পোস্টটি মুছতে হবে বা আমি কি এটি ছেড়ে দিয়ে নীচের

— ভোটগুলিকে

1

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

— আলেম্বেন

@ অ্যাডামক্রুম - না। আপনি যদি নির্দিষ্ট করে থাকেন তবেই এটি হবে width:100%। একটি ডিভ স্বয়ংক্রিয়ভাবে কনটেইনারটি পূরণ করবে যদি না আপনি এটিকে ওভাররাইড করেন, উদাহরণস্বরূপ, স্পষ্টভাবে নির্দিষ্ট করে width, বা ব্যবহার floatবা পরম অবস্থানের দ্বারা। একটি ডিভের সাথে একটি মার্জিন যুক্ত করার ফলে এটি কেবল তার ধারকটি পূরণ করবে, মার্জিন দ্বারা নির্দিষ্ট পরিমাণ কম হবে।

— গিলি 3

@ আলেম্ব - এই ক্ষেত্রে ডাউনভোটগুলি এমন ব্যবহারকারীদের দ্বারা হয় যারা এই উত্তরটি পুরোপুরি সঠিক বলে সিএসএস বোঝে না।

— গিলি 3

1

বাইরের ডিভিতে প্যাডিং পছন্দসই প্রভাবটি পাবে।

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

— জোশ বুশ
সূত্র

1

2 টি কৌশল রয়েছে যা এই সাধারণ দৃশ্যের জন্য কার্যকর হতে পারে। প্রত্যেকের নিজস্ব ত্রুটি রয়েছে তবে এটি উভয় ক্ষেত্রেই কার্যকর হতে পারে।

বক্স-সাইজিং: বর্ডার-বাক্সে কোনও আইটেমের প্রস্থে প্যাডিং এবং সীমানা প্রস্থ অন্তর্ভুক্ত রয়েছে। উদাহরণস্বরূপ, আপনি যদি 20px 20px প্যাডিং এবং 1px সীমানা সহ একটি ডিভের প্রস্থকে 100px তে সেট করেন তবে প্রকৃত প্রস্থটি 142px হবে তবে সীমান্ত-বাক্সের সাথে, প্যাডিং এবং মার্জিন উভয়ই 100px এর মধ্যে থাকবে।

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

এটি সম্পর্কে একটি দুর্দান্ত নিবন্ধ এখানে : http://css-tricks.com/box-sizing/ এবং এখানে একটি ফিজল http://jsfiddle.net/L3Rvw/

এবং তারপরে অবস্থান রয়েছে: পরম

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

উভয়ই অবশ্যই নিখুঁত নয়, বাক্স-আকারদানটি ঠিক এই প্রশ্নের সাথে খাপ খায় না কারণ উপাদানটি 100% - 100 পিক্সের পরিবর্তে 100% প্রস্থের (তবে একটি শিশু ডিভ হবে)। এবং পরম পজিশনিং অবশ্যই প্রতিটি পরিস্থিতিতে ব্যবহার করা যায় না, তবে পিতামাতার উচ্চতা নির্ধারিত পর্যন্ত সাধারণত ঠিক থাকে।

— ডেভ
সূত্র

0

সিএসএস অ্যানিমেশন বা ইভেন্টগুলিতে কোনও শৈলী সংশোধন করতে ব্যবহৃত হতে পারে না।

একমাত্র উপায় জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করা, যা প্রদত্ত উপাদানের প্রস্থটি ফিরিয়ে দেয়, তারপরে এটিতে 100px বিয়োগ করে নতুন প্রস্থের আকার সেট করে।

ধরে নিই যে আপনি jQuery ব্যবহার করছেন, আপনি এর মতো কিছু করতে পারেন:

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

এবং নেটিভ জাভাস্ক্রিপ্ট সহ:

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

আমরা ধরে নিই যে আপনার 100% সহ একটি সিএসএস স্টাইল সেট রয়েছে;

— বরিস গুউরি
সূত্র

0

আপনি কি স্ট্যান্ডার্ড মোড ব্যবহার করছেন? এই সমাধানটি আমার উপর নির্ভর করে এটি নির্ভর করে।

আপনি যদি 2 টি কলাম তৈরি করার চেষ্টা করছেন তবে আপনি এরকম কিছু করতে পারেন:

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

তারপরে এটি স্টাইল করতে সিএসএস ব্যবহার করুন:

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

আপনি যদি 2 টি কলাম না চান তবে আপনি সম্ভবত মুছে ফেলতে পারেন <div id="left">

— hannson
সূত্র

0

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

— রেসিন।
সূত্র

0

আপনি কম ব্যবহার করে সন্ধান করতে পারেন এটি একটি জাভাস্ক্রিপ্ট ফাইল যা আপনার সিএসএসের প্রাক প্রসেস করে যাতে আপনি যুক্তি এবং ভেরিয়েবলগুলি আপনার সিএসএসে অন্তর্ভুক্ত করতে পারেন। সুতরাং আপনার উদাহরণস্বরূপ, কমতে আপনি width: 100% - 100px;যা চান ঠিক তা অর্জন করতে লিখবেন :)

— জন
সূত্র

-1

আপনি পারবেন না।

আপনি তবে একই ফলাফলকে প্রভাবিত করতে মার্জিন ব্যবহার করতে পারেন।

— Traingamer
সূত্র

-1

এইটা কাজ করে:

margin-right:100px;
width:auto;

— user1552559
সূত্র

1

আপনি দয়া করে আপনার উত্তর একটি ব্যাখ্যা যোগ করতে পারেন?

— মিশা পেরেকোভস্কি

আমি চেষ্টা করেছি: ক্যালক (100% -100px) এবং ফলাফলগুলি সমস্ত প্ল্যাটফর্ম / ব্রাউজারগুলিতে অবিচ্ছিন্ন নয়, তারপরে আমি সত্যিই সরল করার চেষ্টা করেছি এবং মার্জিন-রাইট ব্যবহার করেছি: 100px; প্রস্থ: স্বয়ং; এবং এটি কাজ করেছে ...

— ব্যবহারকারীর 1552559

ক্যালক সিএসএস 3 উপাদান এবং এই সিএসএস সেই ব্রাউজারগুলিতে কাজ করবে যা CSS3 সমর্থন করে।

— সুশান

-2

সংক্ষিপ্ত উত্তরটি হ'ল আপনি সিএসএসে এটি করবেন না। ইন্টারনেট এক্সপ্লোরার সিএসএস এক্সপ্রেশন হিসাবে পরিচিত কিছু জন্য সমর্থন আছে, কিন্তু এটি স্ট্যান্ডার্ড নয় এবং অবশ্যই ফায়ারফক্সের মতো অন্যান্য ব্রাউজারগুলি সমর্থন করে না।

আপনি জাভাস্ক্রিপ্ট এ আরও ভাল করতে চাই।

— প্রবীণ আঙ্গিয়ান
সূত্র

হ্যাঁ অনুমান করতে হবে আমাকে এটি জাভাস্ক্রিপ্টে রাখতে হবে, আমি কিছু কোডকে প্রত্যাখ্যান করছি এবং জাভাস্ক্রিপ্টটি মুছে ফেলতে চাইছিলাম যে টিএসটি করছে।

— এফএমএসএফ

1

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

— নিকোল