আমার কাছে নিম্নলিখিত স্নিপেট রয়েছে (পূর্ণ স্ক্রিন মোডে দেখার দরকার আছে), আমি <main>উপাদানটি সরাসরি উপাদানটির নীচে রাখার চেষ্টা করছি <header>। আমার <header>একটি স্থিত অবস্থান রয়েছে কারণ আমি এটির <main>উপাদানটির মাধ্যমে ব্যবহারকারী স্ক্রোল করায় এটি পর্দার শীর্ষে থাকতে চাই । আমি আমার জানা সমস্ত কিছু চেষ্টা করেছি, তবে যে <header>উপাদানটি আমি সামনে আসতে পারি তা হ'ল উপাদানটির শীর্ষে উপাদান রাখা <main>, যা সামগ্রীর একটি বড় অংশকে কেটে দেয়।
আমি যে নিকটতম সম্ভাব্য সমাধানটি নিয়ে এসেছি তা হল <main>উপাদানটির উপর অনুমানযুক্ত শীর্ষ প্যাডিং রাখার ফলে এটি সাফ হয়ে যাবে <header>। যাইহোক, এই সমাধানটি বিভিন্ন স্ক্রিন আকারের জন্য খুব ভালভাবে অ্যাকাউন্ট করে না, যেহেতু আমি px এর পরিবর্তে রিম সাইজিং ব্যবহার করছি। <header>আপেক্ষিক বা শতাংশ ভিত্তিক উচ্চতার ব্যবহারের জন্য বেশ কয়েকটি উপাদান রাখলে শীর্ষ প্যাডিং ধারণাটি আরও খারাপ হয় । একটি পর্দার আকারে সবকিছু নিখুঁত হতে পারে এবং ভিন্ন স্ক্রিন আকারে সামগ্রীটি বন্ধ হয়ে যেতে পারে।
শেষ অবধি, আমি জানি আমি শীর্ষ প্যাডিংকে গতিশীলভাবে সেট করতে jQuery ব্যবহার করতে পারি তবে এটি সর্বদা এটি ভালভাবে কাজ করে বলে মনে হয় না। ভাবছেন এখানে একটি খাঁটি সিএসএস / এইচটিএমএল সমাধান রয়েছে।
কেউ কি আমাকে বলতে পারে আমি এখানে কী মিস করছি? আমার শীর্ষ প্যাডিং পদ্ধতিটি কি কেবলমাত্র কার্যকর সমাধান?
$(document).ready(function() {
$('#navToggle').click(function() {
$("div#bottom-container > nav").slideToggle();
});
$(window).resize(function() {
if(window.innerWidth >= "751") {
$("header > div#bottom-container > nav").show();
}else {
$("header > div#bottom-container > nav").hide();
}
});
$("header > div#bottom-container > nav > ul > li > a").click(function(e) {
if (window.innerWidth <= "750") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
$(this).siblings().slideToggle("slow");
}
}
});
$("header > div#bottom-container > nav > ul > li").hover(function() {
if (window.innerWidth >= "751") {
if ($(this).children("nav").size() > 0) {
$(this).children("nav").stop().show();
}
}
},function(){
if (window.innerWidth >= "751") {
if ($(this).children("nav").size() > 0) {
$(this).children("nav").hide();
}
}
});
});* {
margin: 0;
}
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
}
}
body {
background: #eee;
font-family: "HelveticaNeue-Light", Arial;
height: auto !important;
}
#head-wrap{
margin: 0 auto;
position: relative;
width:100%;
}
#second-wrap{
position: fixed;
width:100%;
z-index:999;
}
main{
height:4000px;
position:relative;
padding-top:13rem;
}
header{
position: absolute;
top:0;
left:0;
width:100%;
overflow-x: hidden;
overflow-y: auto;
height:200rem;
}
#navToggle {
background-color: rgba(0, 0, 0, .15);
position: relative;
right: 0;
top: 0;
z-index:999;
height: 2.6rem;
}
#navToggle>a {
color: rgba(255, 255, 255, .85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: all 300ms ease;
padding-top:.9rem;
}
#bottom-container {
display: flex;
flex-direction: column;
text-align: center;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}
#bottom-container>nav {
background-color: rgb(250, 209, 14);
display: none;
flex: 1;
}
#bottom-container nav>ul {
list-style-type: none;
}
#bottom-container nav>ul>li {
position: relative;
}
#bottom-container nav>ul>li>a {
display: block;
color: rgba(0, 0, 0, .65);
padding: 1.3rem 0;
text-decoration: none;
}
#bottom-container nav>ul>li>a span.toggle {
background-color: rgba(0, 0, 0, .05);
color: rgba(0, 0, 0, .25);
padding: 2px 8px;
}
#bottom-container>nav>ul>li>nav {
display: none;
overflow: hidden;
position: absolute;
top:100%;
right: 5%;
width: 90%;
z-index: 100;
background-color: rgb(250, 250, 250);
margin-bottom:10rem;
}
header>nav>ul>li>nav>ul>li>a {
color: rgba(255, 255, 255, .85);
}
/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
//// THIS IS THE ONLY FIX I KNOW OF //////////
*/
main{
padding-top:5rem;
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/
/* Medium screens */
@media all and (min-width: 751px) {
header{
overflow-y:visible;
overflow-x:visible;
padding-bottom:0;
}
#navToggle {
display: none;
}
#bottom-container {
background-color: rgb(250, 209, 14);
width: 100%;
border-top: calc(5vh + 2vw) solid yellow;
}
#bottom-container>nav {
display: block;
}
#bottom-container>nav>ul {
display: flex;
justify-content: center;
flex-direction: row;
height: 3rem;
}
#bottom-container nav>ul>li {
position: static;
flex:1;
display: flex;
justify-content: center;
align-items: center;
}
#bottom-container nav>ul>li>a {
padding: 0;
}
#bottom-container nav>ul>li>a span.toggle {
display: none;
}
#bottom-container >nav>ul>li>nav>ul>li{
line-height: 2.5rem;
}
#bottom-container>nav>ul>li>nav {
margin-top:-194.5rem;
}
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="head-wrap">
<div id="second-wrap">
<header>
<div id="navToggle"><a href="#">Menu</a></div>
<div id='bottom-container'>
<nav>
<ul>
<li><a href="#">ITEM ONE</a></li>
<li class="sub1">
<a href="#">ITEM TWO <span class="toggle">Expand</span></a>
<nav>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</nav>
<li><a href="#">ITEM THREE</a></li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<main>
<p>content top not visible but should be able to see</P>
<p>line 1</P>
<p>line 2</P>
<p>line 3</P>
<p>line 4</P>
<p>line 5</P>
<p>line 6</P>
<p>line 7</P>
<p>line 8</P>
<p>line 9</P>
<p>line 10</P>
<p>line 11</P>
<p>line 12</P>
<p>line 13</P>
<p>line 14</P>
<p>line 15</P>
<p>line 16</P>
<p>line 17</P>
<p>line 18</P>
<p>line 19</P>
<p>line 20</P>
</main>
</body>
</html>
পূর্ণ স্ক্রিনে মূলটি ইতিমধ্যে শিরোনামের নীচে তবে মোবাইলে নেই
—
আয়মান মুরসি
কারণ
—
অস্টিন
mainউপাদানটিতে প্যাডিং-শীর্ষ স্থান রয়েছে । ক্লানকি, তবে এটি এক ধরণের কাজ করে। এর থেকে আরও ভাল সমাধান হলে ভাবছি।
আমি নিশ্চিত না আপনি কী চান তা হলুদ সীমানা নিষ্ক্রিয় করার পরে আপনি কি চান তা আইবিবিএইচ / বিআর 0 ইয়াইকিকিউ আপনি একটি স্ক্রিন শ্যুট নিতে পারেন
—
আয়মান মুরসি
আমার উদাহরণটি আমার লাইভ সংস্করণের একটি সরলিকৃত সংস্করণ। আমার লাইভ সংস্করণে আমার
—
অস্টিন
<header>উপাদানটিতে বেশ কয়েকটি ফ্লেক্স উপাদান রয়েছে যা সকলেই শতাংশ বা আপেক্ষিক উচ্চতা ব্যবহার করে। এটি <main>প্রায় অকেজো উপাদানটিতে একটি নির্দিষ্ট শীর্ষ প্যাড যুক্ত করে তোলে । <main>উপাদান এক স্ক্রিন সাইজ উপর জরিমানা লাইন আপ এবং অন্য উপর পথ বন্ধ হতে পারে। দেখে মনে হচ্ছে jQuery আমার একমাত্র সমাধান হতে পারে এটির উপর সিএসএস শীর্ষ প্যাড ব্যাক-আপ সহ <main>।
আপনি কি জেএস ব্যবহারের পরিবর্তে সিএসএস
—
আর্থার
position: sticky বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েব / সিএসএস / পজিশন দিয়ে চেষ্টা করেছেন ?