Mam następujący fragment kodu (muszę wyświetlić w trybie pełnoekranowym), że próbuję umieścić <main>element bezpośrednio pod <header>elementem. Mam <header>stałą pozycję, ponieważ chcę, aby pozostała na górze ekranu, gdy użytkownik przewija zawartość <main>elementu. Próbowałem wszystkiego, co wiem, ale najlepsze, co mogę wymyślić, to <header>umieścić element na wierzchu <main>elementu, co odcina dużą część zawartości.
Najbliższym możliwym rozwiązaniem, jakie wymyśliłem, jest nałożenie na <main>element górnego wypełnienia, aby mógł on wyczyścić <header>. Jednak to rozwiązanie nie uwzględnia zbyt dobrze różnych rozmiarów ekranów, ponieważ używam rozmiaru rem zamiast px. Pomysł na najlepsze wypełnienie staje się jeszcze gorszy, gdy umieszcza się kilka elementów wewnątrz, <header>które wykorzystują względną lub procentową wysokość. Na jednym ekranie wszystko może być idealnie dopasowane, a na innym ekranie zawartość może być daleka.
Wreszcie wiem, że mogę użyć jQuery do dynamicznego ustawiania górnego dopełnienia, ale nie zawsze wydaje się to działać dobrze. Zastanawiasz się, czy istnieje czyste rozwiązanie css / html.
Czy ktoś może mi powiedzieć, czego tu brakuje? Czy moja najlepsza metoda wypełniania jest jedynym wykonalnym rozwiązaniem?
$(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>
na pełnym ekranie główny już pod nagłówkiem, ale nie w telefonie komórkowym
—
Ayman Morsy
Wynika to z umieszczonego na
—
Austin
mainelemencie wyściółki . Clunky, ale to działa. Zastanawiasz się, czy istnieje lepsze rozwiązanie.
Nie jestem pewien, czy chcesz to zrobić po wyłączeniu żółtej ramki ibb.co/bR0YykQ. Czy możesz zrobić zrzut ekranu
—
Ayman Morsy
Mój przykład to uproszczona wersja mojej wersji na żywo. W mojej wersji na żywo w moim
—
Austin
<header>elemencie jest kilka elementów elastycznych, z których wszystkie używają wysokości procentowej lub względnej. To sprawia, że dodanie stałej górnej podkładki do <main>elementu jest prawie bezużyteczne. <main>Element może wyrównać grzywny w jednym rozmiarze ekranu i być daleko od drugiego. Wygląda na to, że jQuery może być moim jedynym rozwiązaniem tutaj z kopią zapasową css top pad na <main>elemencie.
Czy próbowałeś używać CSS
—
Arthur
position: sticky developer.mozilla.org/en-US/docs/Web/CSS/position zamiast JS?