मेरे पास निम्नलिखित स्निपेट (पूर्ण स्क्रीन मोड में देखने की आवश्यकता है), कि मैं <main>तत्व को सीधे तत्व के नीचे रखने की कोशिश कर रहा हूं <header>। मेरे पास <header>एक निश्चित स्थिति है क्योंकि मैं चाहता हूं कि यह स्क्रीन के शीर्ष पर रहे क्योंकि उपयोगकर्ता <main>तत्व में सामग्री के माध्यम से स्क्रॉल करता है। मैंने सब कुछ जानने की कोशिश की है, लेकिन सबसे अच्छा मैं इसके साथ आ सकता हूं <header>तत्व के शीर्ष पर रखा गया <main>तत्व है, जो सामग्री का एक बड़ा हिस्सा काट देता है।
निकटतम संभव समाधान जो मैं लेकर आया हूं, वह <main>तत्व पर एक गेसटिमेटेड टॉप पैडिंग लगा रहा है ताकि यह स्पष्ट हो जाए <header>। हालाँकि, यह समाधान विभिन्न स्क्रीन आकारों के लिए बहुत अच्छा नहीं है, क्योंकि मैं px के बजाय रेम साइज़िंग का उपयोग कर रहा हूँ। शीर्ष पैडिंग का विचार तब और भी खराब हो जाता है जब <header>उस तत्व के अंदर कई तत्व रखते हैं जो सापेक्ष या प्रतिशत आधारित ऊंचाई का उपयोग करते हैं। एक स्क्रीन आकार पर सब कुछ सही हो सकता है, और एक अलग स्क्रीन आकार पर सामग्री बंद हो सकती है।
अंत में, मुझे पता है कि मैं गतिशील रूप से शीर्ष पैडिंग सेट करने के लिए jQuery का उपयोग कर सकता हूं, लेकिन यह हमेशा अच्छी तरह से काम नहीं करता है। आश्चर्य है कि वहाँ एक शुद्ध सीएसएस / html समाधान है।
क्या कोई मुझे बता सकता है कि मैं यहाँ क्या याद कर रहा हूँ? क्या मेरा शीर्ष गद्दी विधि एकमात्र कारगर उपाय है?
$(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तत्व पर पैडिंग-टॉप रखा गया है । क्लंकी, लेकिन यह काम करता है। अगर कोई बेहतर उपाय हो तो आश्चर्य होगा।
मैं नहीं कर रहा हूँ यकीन है कि क्या आप चाहते हैं कि यह तस्वीर है के बाद अक्षम पीले सीमा ibb.co/bR0YykQ आप एक स्क्रीन गोली मार ले जा सकते हैं
—
अयमान Morsy
मेरा उदाहरण मेरे लाइव संस्करण का एक सरलीकृत संस्करण है। मेरे लाइव संस्करण में मेरे
—
ऑस्टिन
<header>तत्व में कई फ्लेक्स तत्व हैं जो सभी प्रतिशत या रिश्तेदार ऊंचाइयों का उपयोग करते हैं। यह <main>तत्व में एक निश्चित शीर्ष पैड को जोड़कर लगभग बेकार कर देता है। <main>तत्व एक स्क्रीन आकार पर ठीक लाइन अप और एक अन्य पर रास्ता बंद हो सकता है। ऐसा लगता है कि jQuery <main>तत्व पर css टॉप पैड बैक-अप के साथ मेरा एकमात्र समाधान हो सकता है ।
क्या आपने JS का उपयोग करने के बजाय CSS
—
आर्थर
position: sticky developer.mozilla.org/en-US/docs/Web/CSS/position के साथ प्रयास किया ?