আপনি স্প্যান ব্যবহার করে একটি কাস্টম সীমানা তৈরি করতে পারেন। একটি শ্রেণি সহ স্প্যান তৈরি করুন (সীমান্তটি যে দিকে যাচ্ছে সেদিকে সুনির্দিষ্ট করে) এবং একটি আইডি:
<html>
<body>
<div class="mdiv">
<span class="VerticalBorder" id="Span1"></span>
<header class="mheader">
<span class="HorizontalBorder" id="Span2"></span>
</header>
</div>
</body>
</html>
তারপর, আপনি সিএসএস-এ যান এবং ক্লাসের সেট position:absolute, height:100%(উল্লম্ব সীমানা জন্য) width:100%(অনুভূমিক সীমানা জন্য) margin:0%এবং background-color:#000000;। অন্য যে কোনও প্রয়োজনীয় জিনিস যুক্ত করুন:
body{
margin:0%;
}
div.mdiv{
position:absolute;
width:100%;
height:100%;
top:0%;
left:0%;
margin:0%;
}
header.mheader{
position:absolute;
width:100%;
height:20%;
top:0%;
left:0%;
margin:0%;
}
span.HorizontalBorder{
position:absolute;
width:100%;
margin:0%;
background-color:#000000;
}
span.VerticalBorder{
position:absolute;
height:100%;
margin:0%;
background-color:#000000;
}
তারপর আইডি সেট অনুরূপ class="VerticalBorder"করতে top:0%;, left:0%;, width:1%;। (যেহেতু mdiv প্রস্থ 100% এ mheader প্রস্থ সমান, প্রস্থ কি এটি সেট 100% করা হবে 1% প্রস্থ সেট করেন তাহলে সীমানা উইন্ডোটির প্রস্থের 1% হবে)। ID সেট করুন যে অনুরূপ class="HorizontalBorder"করতে top:99%, (যেহেতু এটি একটি শিরোলেখ ধারক শীর্ষ অবস্থানে এটা হেডার অনুযায়ী হয় বোঝায় আছে। এই + উচ্চতা যদি আপনি এটি নীচে পৌঁছাতে চান 100% পর্যন্ত যোগ উচিত) left:0%;এবং height:1%(যেহেতু এমডিআইভিটির উচ্চতা মাথার উচ্চতার চেয়ে পাঁচগুণ বেশি [100% = 100, 20% = 20, 100/20 = 5], উচ্চতা আপনি সেট করেছেন তার 20% হবে If আপনি যদি উচ্চতা সেট করেন তবে 1% থেকে সীমানা উইন্ডোটির উচ্চতার .2% হবে)। এটি দেখতে কেমন হবে তা এখানে:
span#Span1{
top:0%;
left:0%;
width:.4%;
}
span#Span2{
top:99%;
left:0%;
width:1%;
}
অস্বীকৃতি: আপনি যদি উইন্ডোটিকে একটি ছোট আকারের আকারে পরিবর্তন করেন তবে সীমাগুলি অদৃশ্য হয়ে যাবে। উইন্ডোটিকে নির্দিষ্ট বিন্দুতে পুনরায় আকার দেওয়া হলে একটি সমাধান হ'ল সীমানার আকার ক্যাপ করা। আমি যা করেছি তা এখানে:
window.addEventListener("load", Loaded);
function Loaded() {
window.addEventListener("resize", Resized);
function Resized() {
var WindowWidth = window.innerWidth;
var WindowHeight = window.innerHeight;
var Span1 = document.getElementById("Span1");
var Span2 = document.getElementById("Span2");
if (WindowWidth <= 800) {
Span1.style.width = .4;
}
if (WindowHeight <= 600) {
Span2.style.height = 1;
}
}
}
আপনি যদি সবকিছু ঠিকঠাক করেন তবে এটি দেখতে এই লিঙ্কটিতে কেমন তা দেখতে হবে: https://jsfiddle.net/umhgkvq8/12/
কিছু অদ্ভুত কারণে, সীমানাটি jsfiddle এ অদৃশ্য হয়ে যাবে তবে আপনি এটি ব্রাউজারে চালু না করলে নয় not ।
border-widthমান হিসাবে শতাংশ সমর্থন করে না। আপনি em, px, ex ইত্যাদি ব্যবহার করতে পারেন তবে আপনি কেনborder-width10% সেট করতে চান ?