অবস্থান: আপেক্ষিক একটি খালি স্থান ছেড়ে দেয়

Question

কোডটি এখানে: http://laser.org.ru/vs/example.html

প্রধান ব্লকের (# পৃষ্ঠায়) শূন্য স্থানটি কীভাবে সরিয়ে ফেলবেন?

Comments

আপনি নীচের প্যাডিং বোঝাতে চান, বা পুরো জিনিস উল্লম্ব কেন্দ্রে?

— অ্যালেক্স

আপনি কি # পৃষ্ঠার ডিভ এবং সীমান্তে পাঠ্যের মধ্যবর্তী স্থানটি বোঝাচ্ছেন? অন্যথায় আপনি কোন স্থানের কথা বলছেন তা আমি নিশ্চিত নই।

— জেরেমি ব্যাটেল

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

— অ্যালেক্স

অন্য কেউ এই সমস্যা দেখছেন না?

— মাইলস গ্রে

অনুগ্রহ করে উত্তরটি [ স্ট্যাকওভারফ্লো.com/ প্রশ্নস / ১৩72২২০৯৫/২ [1] এ চিহ্নিত করুন : স্ট্যাকওভারফ্লো

— সোহেল পাঠান

Answer 1

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

আমি লেআউটটি প্রায় খানিকটা খেললাম এবং আমি আপনাকে এই তিনটি বিধি পরিবর্তন করার পরামর্শ দিচ্ছি:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

Comments

"এবং আপনি এ থেকে মুক্তি পেতে পারবেন না।" - তুমি পারো প্ল্যাগের উত্তরের মতো কেবল নেতিবাচক মার্জিন ব্যবহার করুন।

— মিশা কে

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

— গুফা

@ মাইচাক: এই উত্তরটি এবং অন্যান্য সম্পূর্ণ সম্পর্কহীন জবাবগুলির উপর গুরুত্ব আরোপ করা সাহায্য করে না, আপনি এখনও আপেক্ষিক অবস্থানের কারণে স্থান থেকে মুক্তি পেতে পারবেন না।

— গুফা 20

@ মিচাক: আপনি কেবল স্থানটি coverেকে রাখতে পারবেন এবং এ থেকে মুক্তি পেতে না পারার জন্য আপনাকে অন্যান্য উপাদান থাকতে হবে যা কভার করার জন্য খালি জায়গার চেয়ে কমপক্ষে বড়। উদাহরণস্বরূপ, যদি আপনার কাছে 200px উঁচু একটি উপাদান থেকে একটি খালি স্থান থাকে এবং কেবল গর্তটি toাকতে 100px hight হয় তবে আপনার কাছে গর্তটির 100px বাম থাকবে।

— গুফা

ডাউনটা কেন? আপনি যদি ভুল বলে মনে করেন তবে এটি কী ব্যাখ্যা করে না, তবে উত্তরটি উন্নত করতে পারে না।

— গুফা

Answer 2

আমার পক্ষে অন্য যে কৌশলটি কার্যকর হয়েছিল তা হ'ল আপনি যে আপেক্ষিক উপাদানটি সরিয়ে নিয়েছেন তাতে নেতিবাচক মার্জিন-ডাউন ব্যবহার করা। পরম অবস্থানের সাথে যেতে হবে না।

কিছুটা এইরকম:

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

সবুজ থেকে এখন আমি যে সমাধানটি দেখছি তার সাথে অনুরূপ (অভিন্ন না হলে)

Comments

একটি দুর্দান্ত, সহজ উত্তর। এবং সঠিক প্রমাণ যে এইচটিএমএল / সিএসএস একটি ফ্রিকশো।

— সেনেসো

@ প্ল্যাং, কাজ করছে বলে মনে হচ্ছে না। Jsfiddle.net/u7sq8rL7/1 দেখুন । সবুজ পটভূমি শেষ উপাদান ছাড়িয়ে প্রসারিত।

— পেসারিয়ার

@ পেসারিয়র মার্জিন-নীচে ব্যবহার করবেন না। এটি অবশ্যই কাজ করে না (এটি সম্পর্কে চিন্তা করুন); আপনার মার্জিন-টপ দরকার।

— উইলিয়াম

এটি পুরোপুরি কাজ করে। এবং হ্যাঁ আপনি margin-bottomএকটি বিয়োগ নম্বর ব্যবহার করেছেন কারণ আপনি নীচের অতিরিক্ত স্থান থেকে মুক্তি পেতে চান।

— ph

ভাল, আপনার লেআউটটি যদি ভাল স্বাস্থ্যের হয় তবে এটি ঠিক ঠিক কাজ করবে

— ভিটালিয়ায় তেরজিভ

Answer 3

#page 
{ 
     overflow:hidden; 
}

Answer 4

এই নিয়ম ব্যবহার করে দেখুন:

#page {
  border: 2px solid #404241;
  bottom: 0;
  padding: 8px 16px;
  position: absolute;
  top: 70px;
  width: 600px;
}

আমি পরম স্থানে অবস্থান পরিবর্তন করেছি, এটি আপনাকে bottom: 0সম্পত্তিটি ব্যবহার করতে দেয় ।

Answer 5

#page {
  padding-bottom: 0;
}

Comments

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

— জেরেমি ব্যাটেল

@ জেরেমি যুদ্ধ অবশ্যই, প্যাডিং আরও ভাল দেখাচ্ছে।

— অ্যালেক্স

@ কির আপনি প্রকৃতপক্ষে আপনার বর্তমান শৈলীকে প্যাডিংয়ে পরিবর্তন করতে পারবেন: 8px 16px 0px; আপনার সিএসএসে অতিরিক্ত রেখা থাকা এড়াতে।

— জেরেমি ব্যাটেল

আমি বিশ্বাস করি এটি কন্টেন্ট ধারকের নীচে 300px স্থান যা সমস্যা,

— ধারকটির

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

— কেটি

Answer 6

আমারও একই সমস্যা ছিল। সবচেয়ে সহজ উপায়টি শীর্ষে প্রতিস্থাপন margin-topকরা #page।

Comments

শীর্ষ + মার্জিন-নীচের পরিবর্তে নেতিবাচক মান সহ মার্জিন-শীর্ষ, যাওয়ার উপায়

— xtian

Answer 7

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

.maincontent {
    height: 675px;
}

Answer 8

আমার উত্তর দেরি হয়েছে তবে এটি অন্যদেরকেও আমার অনুরূপ ইস্যুতে সহায়তা করতে পারে।

আমি একটি ছিল <div>সঙ্গে position: relative;যেখানে সব সন্তান উপাদান আছে position: absolute;শৈলী। এর ফলে আমার পৃষ্ঠায় প্রায় 20px সাদা স্থান উপস্থিত হয়েছিল।

এটি কাছাকাছি margin-top: -20px;আসার জন্য আমি সাথে পরবর্তী ভাইবোন উপাদান যুক্ত <div>করেছি position: relative;।

আপনার যদি আগে কোনও ভাইবোন উপাদান থাকে তবে আপনি এটি ব্যবহার করতে পারেন margin-bottom: -20px;

section {
  height: 200px;
}

<h2>Extra Whitespace</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    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>
</section>


<h2>No Whitespace margin-top</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div style="margin-top:-20px;">
    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>
</section>


<h2>No Whitespace margin-bottom</h2>
<section>
  <div style="margin-bottom:-20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    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>
</section>

Answer 9

আমি নিম্নলিখিত ফ্রেমওয়ার্কটি ব্যবহার করে হোয়াইটস্পেসগুলি থেকে মুক্তি পেতে সক্ষম হয়েছি:

এবং এখানে মার্কআপ

<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
    <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>

Answer 10

এই প্রশ্নের উত্তরের উত্তর বলে মনে হচ্ছে - তবে উপরের সমস্ত উত্তরগুলির আমার লেআউটে খারাপ প্রতিক্রিয়া ছিল। এটিই আমার পক্ষে সত্যই কাজ করেছিল:

.moveUp {
    position: relative;
}
.moveUp > * {
    position: absolute;
    width: 100%;
    top: -75px;
}

/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
    height: 100px;
    color: white;
}
.box1 {
    background: red;
}
.box2 {
    background: blue;
    height: 50px;
}
.box3 {
    background: green;
}

<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>

Answer 11

আপনি নীচে ফাঁকা স্থান ছেড়ে যেতে না চাইলে সেরা সমাধান (আপেক্ষিক)

মার্জিন-শীর্ষ এবং অবস্থান ব্যবহার করা হয়: স্টিকি

#page {
     margin-top: -280px;
     position: sticky;
}