পৃষ্ঠার নিচের অংশে কোনও লিখিত সামগ্রী না থাকলেও কীভাবে আমি ডিআইভি ব্লককে বাধ্য করব?

190

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

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

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

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

এবং আমার সিএসএস :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
css  html  border 
— ভিন্স পানুসিওও
সূত্র
যদি আরও কন্টেন্ট থাকে তবে আপনি কী করতে চান এটি পৃষ্ঠায় ফিট করতে পারে? আপনি কোন ব্রাউজারগুলি সম্পর্কে যত্নশীল?
— drs9222

উত্তর:

117

আপনার সমস্যাটি এই নয় যে ডিভটি 100% উচ্চতায় নয়, তবে এটির চারপাশে থাকা ধারকটি নেই his এটি ব্রাউজারে সহায়তা করবে যা আপনি সন্দেহ করছেন যে আপনি ব্যবহার করছেন:

html,body { height:100%; }

আপনার পাশাপাশি প্যাডিং এবং মার্জিনগুলিও সামঞ্জস্য করতে হবে তবে এটি আপনাকে সেখানে 90% পথ পাবে you যদি আপনাকে এটি সমস্ত ব্রাউজারগুলির সাথে কাজ করার প্রয়োজন হয় তবে আপনাকে এটির সাথে কিছুটা গোলমাল করতে হবে।

এই সাইটের কয়েকটি দুর্দান্ত উদাহরণ রয়েছে:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

আমি http://quirksmode.org/ এ যাওয়ার পরামর্শ দিচ্ছি

— জেসন হার্নান্দেজ
সূত্র
46
এই সমাধানটি স্ক্রোল করা পৃষ্ঠাগুলির সাথে বন্ধুত্বপূর্ণ নয়।
— jbranchaud
3
— সিএসএসে ন্যূনতম
1
মজার বিষয় হল এটি আমার স্ক্রোলিং সমস্যাগুলির কারণ হিসাবে বিপরীতে বাছাই করেছে
— অ্যালান ম্যাকডোনাল্ড
এটি ক্রোমের সর্বশেষতম সংস্করণে আমার পক্ষে কাজ করে না।
— হ্যালো ওয়ার্ল্ডনমোর
48

পৃষ্ঠার নীচে একটি পাদলেখকে আঁকড়ে ধরার পরিবর্তে আমি শিরোনামে সরাসরি প্রশ্নের উত্তর দেওয়ার চেষ্টা করব।

উপলভ্য উল্লম্ব ব্রাউজার ভিউপোর্টটি পূরণ করার মতো পর্যাপ্ত সামগ্রী না থাকলে ডিভকে পৃষ্ঠার নীচে প্রসারিত করুন:

(ড্র্যাগ ফ্রেম হ্যান্ডেল প্রভাব দেখতে) এ ডেমো: http://jsfiddle.net/NN7ky
(। গোলমালে: পরিষ্কার, সহজ downside হয়: flexbox প্রয়োজন - http://caniuse.com/flexbox )

এইচটিএমএল:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

সিএসএস:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

তা-দা - বা আমি খুব ঘুমিয়ে পড়েছি

— Gima
সূত্র
14
আমাদের মধ্যে কিছু লোক কেবল "আধুনিক" ব্রাউজারগুলিকে সমর্থন করার জন্য যথেষ্ট ভাগ্যবান তাই এটি আমার পক্ষে অবিশ্বাস্যভাবে কার্যকর ছিল। ধন্যবাদ জিমা আমি এরকম কিছু করার বিভিন্ন উপায় চেষ্টা করেছিলাম তবে এটি সর্বদা বিভিন্ন সূক্ষ্ম উপায়ে ভেঙে যায়। এটা অনেক ভাল। এখনও কেন বুঝতে পারছেন না কেন এটি এভাবে কাজ করে।
— ক্রিস নিকোলা
1
ফ্লেক্সবক্স উপাদান এর উপাদানগুলির মধ্যে এটির উপাদানগুলির মধ্যে ভাগ করার চেষ্টা করে। আমি যে সমাধানটির প্রস্তাব দিয়েছি সেগুলি 1) ডিভগুলি সঙ্কুচিত করা অস্বীকার করে এবং 2) .div2 এর বর্ধন সক্ষম করে। সুতরাং ডিভগুলি তাদের বিষয়বস্তুগুলি আড়াল করার জন্য সঙ্কুচিত হয় না এবং কেবলমাত্র .div2 প্রসারিত করার অনুমতি দেওয়া হয়।
— জিমা
সুতরাং এটি ফায়ারফক্সে আমার যে সমস্যাটি ছিল তা সংশোধন করে, যেখানে ব্রাউজারের জন্য সামগ্রীটি এখনও কিছুটা বড় ছিল। দুর্ভাগ্যক্রমে, ক্রোমে, এই একা এই সমস্যাটি ঠিক করে না। যাইহোক, মার্জিন সেট করে 0 তে প্যাডিংও করে।
— মাইকেল শেপার
এটি সঠিক উত্তর, ন্যূনতম উচ্চতা: 100% কেবল তখনই কাজ করে যদি পিতামাতার ধারকটিতে আরও কিছু না থাকে এবং ক্যালকুট আসলেই সাহায্যকারী হয় না যদি প্রসারিত উপাদানটির উপরের
— ভাইবোনটির
ঘন্টাখানেক ধরে এই সমস্যাটির সাথে লড়াই করার পরে, এটিই কেবলমাত্র আমার জন্য সমাধানের সমাধান। প্রতিটি অংশ কী করে তার কেবলমাত্র একটি বিশদ ব্যাখ্যা অনুপস্থিত। তবে যাইহোক, আপনাকে @ গিমাকে অনেক ধন্যবাদ।
— পিলুন্ড
18

নিম্নলিখিত সিএসএস বিধি দিয়ে চারপাশে খেলার চেষ্টা করুন:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

আপনার পৃষ্ঠা অনুসারে উচ্চতা পরিবর্তন করুন। ক্রস ব্রাউজারের সামঞ্জস্যের জন্য উচ্চতার দু'বার উল্লেখ করা হয়েছে।

— কেভিন পড়ুন
সূত্র
এটি কাজ করে, তবে আমি দেখতে পেয়েছি যে আমি যদি ন্যূনতম উচ্চতা 600px এরও বেশি বৃদ্ধি করি তবে এটি একটি স্ক্রোল তৈরি করে। কেন এমন হচ্ছে তা আপনার কোনও ধারণা আছে?
— সিদ্ধার্থ প্যাটেল 14
1
@ সিদ্ধার্থপ্যাটেল কারণ # কনটেন্ট ডিভটি তার পিতামাতার উপচে পড়ছে। সুতরাং # কনটেন্ট ডিভের পিতামাতাকে একটি ওভারফ্লো: অটো বা ওভারফ্লো: লুকানো CSS মান নির্ধারণ করুন এবং এটি স্ক্রোলের পরিবর্তে ফিট / ওভারফ্লোতে ফিট করতে হবে। মন্তব্যগুলির পরিবর্তে পরের বার নতুন প্রশ্ন হিসাবে এই জাতীয় প্রশ্ন উত্থাপন করার চেয়ে সম্ভবত আরও ভাল হবে :)
— কল্ট ম্যাককর্ম্যাক
প্রতিটি উত্তরের পদ্ধতি চেষ্টা করার পরে, এটি কেবলমাত্র কাজ করে। এমনকি এটি নিখুঁতভাবে কাজ করে, কারণ পৃষ্ঠার উচ্চতার সাথে মিলে যাওয়ার জন্য আমাকে উচ্চতার মানটি সামঞ্জস্য করতে হবে, তাই এটি টুইট করে। তবে এটি সমস্ত ব্রাউজারের জন্য সমানভাবে কাজ করে।
— তারকাস
এই উত্তরের জন্য আপনাকে অনেক ধন্যবাদ। এটি সহজ এবং একাধিক প্ল্যাটফর্মগুলিতে ভাল কাজ করে। আমি প্রায় 1 বছর আগে উপলব্ধি না করেই বাস্তবে এটি ব্যবহার করেছিলাম, আশা করি আমি দু'বার উপার্জন করতে পারব।
— vedi0boy
4

রায়ান ফেইটের "স্টিকি পাদলেখ" সমাধান চেষ্টা করুন,

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

আইই, ফায়ারফক্স, ক্রোম, সাফারি এবং অনুমিত অপেরা জুড়েও কাজ করে তবে এটি পরীক্ষা করেনি। এটি একটি দুর্দান্ত সমাধান। বাস্তবায়নের জন্য খুব সহজ এবং নির্ভরযোগ্য।

— Anjisan
সূত্র
7
লিঙ্কগুলি নিচে! লিংক ডাউন!
— কোডিমিরার
3
আমাদের পতিত হোমের কথা এখানে 🍻
— আব্রাহাম ব্রুকস
1
— সি 24 ডাব্লু
3

ন্যূনতম-উচ্চতার সম্পত্তিটি সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়। লম্বা পৃষ্ঠাগুলিতে উচ্চতা প্রসারিত করার জন্য আপনার যদি আপনার # সামগ্রীর প্রয়োজন হয় তবে উচ্চতার সম্পত্তিটি এটি কেটে দেবে।

এটি কিছুটা হ্যাক তবে আপনি আপনার # কনটেন্ট ডিভের অভ্যন্তরে 1px প্রস্থ এবং 1000px উচ্চতা সহ একটি খালি ডিভি যুক্ত করতে পারেন। এটি সামগ্রীতে কমপক্ষে 1000px উচ্চ হতে বাধ্য করবে এবং প্রয়োজনীয় সামগ্রীর পরেও লম্বা সামগ্রীটিকে উচ্চতা বাড়ানোর অনুমতি দেবে

— জিন
সূত্র
3

এটি খাঁটি সিএসএসের মতো মার্জিত নয় তবে জাভাস্ক্রিপ্টের একটি সামান্য বিট এটি সম্পাদন করতে সহায়তা করতে পারে:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
— অ্যাডাম ফ্রাঙ্কো
সূত্র
3

চেষ্টা করুন:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

এটি এখনও পরীক্ষা করা হয়নি ...

— গালাগাল
সূত্র
3

স্থির উচ্চতা সহ স্টিকি পাদলেখ:

এইচটিএমএল স্কিম:

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

সিএসএস:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
— ডেভিড হোরাক
সূত্র
2

ব্যবহার করে দেখুন http://mystrd.at/modern-clean-css-sticky-footer/

উপরের লিঙ্কটি নিচে, তবে এই লিঙ্কটি https://stackoverflow.com/a/18066619/1944643 ঠিক আছে। : ডি

ডেমো:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
— ভিনিসিয়াস জোসে লেটারে
সূত্র
1
@ কোডমারির ধন্যবাদ, আমি কাজটি করছে এমন অন্য লিঙ্কের সাথে মন্তব্যটি সম্পাদনা করেছি।
— ভিনিসিয়াস জোসে লেটারে
1

আপনি উপাদানটির এবং তার পিতামাতার ন্যূনতম-উচ্চতার সম্পত্তিটির জন্য "vh" দৈর্ঘ্যের ইউনিটটি ব্যবহার করতে পারেন। এটি IE9 থেকে সমর্থিত:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

সিএসএস:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
— নিকো
সূত্র
এটি কেবল পৃষ্ঠাটি নয়, ভিউপোর্টের উচ্চতায় ডিভকে প্রসারিত করে।
— jansmolders86
1

আমি মনে করি যে এই সমস্যাটি এইচটিএমএলকে 100% পূরণ করার ফলেও ঠিক করা হবে, এটি এইচটিএমএল এর 100% পূরণ করে তবে এইচটিএমএল স্ক্রিনের 100% পূরণ করে না।

সাথে চেষ্টা করুন: 

html, body {
      height: 100%;
}
— ডেভিড মার্সিয়েল
সূত্র
0

কোডটি আমার কাছে নেই, তবে আমি জানি উচ্চতার সংমিশ্রণটি ব্যবহার করে আমি একবার এটি করেছি: 1000px এবং মার্জিন-নীচে: -1000px; চেষ্টা কর.

— আলেকজান্ডার মরল্যান্ড
সূত্র
বাহ, যে আসলে কাজ করে! তবে যদি সামগ্রীটি
— ধারকটি
0

আপনার লেআউটটি কীভাবে কাজ করে তার উপর নির্ভর করে আপনি <html>উপাদানটিতে ব্যাকগ্রাউন্ড সেট করে চলে যেতে পারেন , যা সর্বদা ভিউপোর্টের উচ্চতা কম।

0

কেবল স্টাইলশিট (সিএসএস) ব্যবহার করে এটি সম্পাদন করা সম্ভব নয়। কিছু ব্রাউজার গ্রহণ করবে না

height: 100%;

ব্রাউজার উইন্ডোটির দৃষ্টিকোণের চেয়ে উচ্চতর মান হিসাবে।

জাভাস্ক্রিপ্ট হ'ল সবচেয়ে সহজ ক্রস ব্রাউজার সমাধান, যেমনটি উল্লেখ করা হয়েছে, পরিষ্কার বা সুন্দর নয়।

— মার্টিন
সূত্র
-2

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

— ওয়েন-ডি
সূত্র
-2

সর্বাধিক মানের সর্বোত্তম বা সর্বোত্তম বাস্তবায়ন নয়, তবে আপনি স্প্যানের জন্য ডিআইভি পরিবর্তন করতে পারেন ... এটি এতটা সুপারিশযোগ্য নয় তবে দ্রুত ফিক্স = পি =)

— Metafaniel
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.