আমার পৃষ্ঠার বাম দিকে আমার নেভিগেশন বার রয়েছে এবং আমি চাই এটি পৃষ্ঠার উচ্চতার 100% পর্যন্ত প্রসারিত হোক। শুধু ভিউপোর্টের উচ্চতা নয়, আপনি স্ক্রোল না হওয়া পর্যন্ত লুকানো অঞ্চলগুলি অন্তর্ভুক্ত করুন। আমি এটি সম্পাদন করতে জাভাস্ক্রিপ্ট ব্যবহার করতে চাই না।
এটি কি এইচটিএমএল / সিএসএসে করা যায়?
উত্তর:
গতিশীল পটভূমির জন্য একটি ধারক হিসাবে একটি ডিভি ব্যবহার করার সময় অবশেষে আমি এখানে এসেছি এমন সমাধান।
z-indexনন-ব্যাকগ্রাউন্ড ব্যবহারের জন্য সরান ।leftবা rightজন্য।topবা bottomজন্য।সম্পাদনা 1: নীচে সিএসএস সম্পাদনা করা হয়েছে কারণ এটি এফএফ এবং ক্রোমে সঠিকভাবে প্রদর্শিত হয়নি। position:relativeএইচটিএমএল হতে সরানো হয়েছে এবং তার height:100%পরিবর্তে বডিটি সেট করুন min-height:100%।
সম্পাদনা 2: সিএসএসে অতিরিক্ত মন্তব্য যুক্ত করা হয়েছে। উপরে আরো কিছু নির্দেশ যুক্ত করা হয়েছে।
সিএসএস:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
এইচটিএমএল:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
কেন?
html{min-height:100%;position:relative;}এটি ছাড়াই ক্লাউড-ধারক ডিআইভি এইচটিএমএলের লেআউট প্রসঙ্গে মুছে ফেলা হয়েছে। position: relativeএটি নিশ্চিত করে যে ডিআইভি এইচটিএমএল বাক্সের যখন এটি আঁকবে তখন তার ভিতরে থাকবে যাতে bottom:0এটি HTML বক্সের নীচের অংশটিকে বোঝায় to আপনি height:100%ক্লাউড-ধারকটিতেও ব্যবহার করতে পারেন কারণ এটি এখন HTML ট্যাগের উচ্চতা নির্দেশ করে এবং ভিউপোর্টকে নয় to
htmlযদিও উপাদানটিতে ন্যূনতম উচ্চতা (এবং কেবল উচ্চতা নয়) ব্যবহার করতে হবে । কেন এমন?
heightহচ্ছে 'আপনি এই লম্বা; আর বেশি কিছু হবে না। ' যার অর্থ এটি ভিউপোর্টের উচ্চতা হবে। আমরা চাই এটি ভিউপোর্ট বা লম্বার চেয়ে কমপক্ষে লম্বা হোক। min-heightএই সুন্দরভাবে না।
<html>অবস্থান এবং ভিউপোর্টে অবস্থান দুটি পৃথক জিনিস। ধন্যবাদ!
এইচটিএমএল 5 দিয়ে, সহজতম কাজটি সহজভাবে করা height: 100vh। যেখানে 'vh' ব্রাউজার উইন্ডোর ভিউপোর্টের উচ্চতার জন্য দাঁড়িয়েছে। ব্রাউজার এবং মোবাইল ডিভাইসগুলির আকার পরিবর্তন করতে প্রতিক্রিয়াশীল।
vw।
আমারও অনুরূপ সমস্যা ছিল এবং সমাধানটি হ'ল:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
পৃষ্ঠার উচ্চতার 100% উচ্চতা সহ আমি একটি পৃষ্ঠা কেন্দ্রিক ডিভ চেয়েছিলাম, সুতরাং আমার মোট সমাধানটি ছিল:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
আপনার একটি পিতামাত উপাদান (বা কেবল 'দেহ') থাকতে পারে position: relative;
cloud-container?
আপনি জালিয়াতি কলামগুলি ব্যবহার করে প্রতারণা করতে পারেন বা আপনি কয়েকটি সিএসএস কৌশল ব্যবহার করতে পারেন
এটি একটি টেবিল ব্যবহার করে সহজ:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>যখন ডিআইভি প্রবর্তিত হয়েছিল, লোকেরা টেবিলগুলিতে এত ভয় পেত যে দরিদ্র ডিআইভি রূপক হাতুড়ি হয়ে যায়।
অবস্থান নিরঙ্কুশ ব্যবহার করুন। নোট করুন যে আমরা সাধারণত পজিশন নিখুঁতভাবে ব্যবহার করতে অভ্যস্ত না যার জন্য ম্যানুয়ালি জিনিসগুলি বাইরে রাখা বা ভাসমান সংলাপগুলি প্রয়োজন। আপনি উইন্ডো বা সামগ্রীটি পুনরায় আকার দেওয়ার সময় এটি স্বয়ংক্রিয়ভাবে প্রসারিত হবে। আমি বিশ্বাস করি যে এটিগুলির জন্য স্ট্যান্ডার্ড মোড প্রয়োজন তবে এটি আই 6 এবং তারপরে কাজ করবে।
আপনার কনটেন্টের সাথে আইডি 'কনটেন্ট' দিয়ে ডিভটি প্রতিস্থাপন করুন (নির্দিষ্ট উচ্চতা কেবল উদাহরণের জন্য রয়েছে, আপনাকে প্রকৃত সামগ্রীতে কোনও উচ্চতা নির্দিষ্ট করতে হবে না।
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>এটি যেভাবে কাজ করে তা হ'ল বাইরের ডিভিএভি বারের জন্য একটি রেফারেন্স পয়েন্ট হিসাবে কাজ করে। বাইরের ডিভটি 'কন্টেন্ট' ডিভের মাধ্যমে প্রসারিত হয়। নাভি বারটি তার পিতামাতার উচ্চতা পর্যন্ত নিজেকে প্রসারিত করতে পরম অবস্থান ব্যবহার করে। অনুভূমিক প্রান্তিককরণের জন্য আমরা কনটেন্ট ডিভকে নভবারের একই প্রস্থের দ্বারা অফসেট করে তুলি।
এটি CSS3 ফ্লেক্স বক্স মডেলটির সাহায্যে আরও সহজ করা হয়েছে, তবে এটি এখনও আইটিতে পাওয়া যায় না এবং এর কয়েকটি নিজস্ব ক্রিক রয়েছে।
আমি তোমার মতো একই সমস্যায় পড়েছি। আমি একটি DIVব্যাকগ্রাউন্ড হিসাবে তৈরি করতে চেয়েছিলাম , কেন, জাভাস্ক্রিপ্টের মাধ্যমে ডিভটি ম্যানিপুলেট করা সহজ। যাইহোক তিনটি জিনিস আমি সেই ডিভের জন্য সিএসএসে করেছি।
সিএসএস:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}আপনি যদি আরও আধুনিক ব্রাউজারগুলি টার্গেট করে থাকেন তবে জীবন খুব সহজ হতে পারে। চেষ্টা করে দেখুন:
.elem{
height: 100vh;
}আপনার যদি পৃষ্ঠার 50% এ এটির প্রয়োজন হয় তবে 50 এর সাথে 100 প্রতিস্থাপন করুন।
একটি মডেল পপআপ অনুরোধ করার আগে আমি পুরো ওয়েব পৃষ্ঠাটি কভার করতে চাই। আমি সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে অনেকগুলি পদ্ধতি চেষ্টা করেছি তবে নিম্নলিখিত সমাধানগুলি না বের হওয়া পর্যন্ত এগুলির কোনওটিই সহায়তা করে না। এটি আমার পক্ষে কাজ করে, আমি আশা করি এটি আপনাকেও সহায়তা করবে।
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>শুভকামনা ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>সরল, কেবল এটি একটি টেবিল ডিভের মধ্যে আবদ্ধ করুন ...
এইচটিএমএল:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>সিএসএস:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>