Ich habe das folgende Snippet (muss im Vollbildmodus angezeigt werden), das ich versuche, das <main>
Element direkt unter dem <header>
Element zu platzieren. Ich habe das <header>
in einer festen Position, weil ich möchte, dass es am oberen Bildschirmrand bleibt, wenn der Benutzer durch den Inhalt des <main>
Elements blättert . Ich habe alles versucht, was ich weiß, aber das Beste, was ich mir einfallen lassen kann, ist, das <header>
Element über dem Element zu platzieren <main>
, wodurch ein großer Teil des Inhalts abgeschnitten wird.
Die nächstmögliche Lösung, die ich gefunden habe, besteht darin, das <main>
Element mit einer geschätzten oberen Polsterung zu versehen, damit das Element gelöscht wird <header>
. Diese Lösung berücksichtigt jedoch verschiedene Bildschirmgrößen nicht sehr gut, da ich die Größenänderung anstelle von px verwende. Die Idee der oberen Polsterung wird noch schlimmer, wenn mehrere Elemente innerhalb der <header>
relativen oder prozentualen Höhe platziert werden. Auf einer Bildschirmgröße kann alles perfekt ausgerichtet sein, und auf einer anderen Bildschirmgröße kann der Inhalt weit entfernt sein.
Schließlich weiß ich, dass ich jQuery verwenden kann, um die obere Polsterung dynamisch einzustellen, aber es scheint nicht immer so gut zu funktionieren. Ich frage mich, ob es eine reine CSS / HTML-Lösung gibt.
Kann mir jemand sagen, was ich hier vermisse? Ist meine Top-Padding-Methode die einzig praktikable Lösung?
$(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>
quelle
main
Element platziert ist. Klobig, aber es funktioniert irgendwie. Ich frage mich, ob es eine bessere Lösung gibt.<header>
Element, die alle entweder prozentuale oder relative Höhen verwenden. Dies macht das Hinzufügen eines festen oberen Pads zum<main>
Element fast unbrauchbar. Das<main>
Element kann auf einer Bildschirmgröße gut ausgerichtet sein und auf einer anderen weit entfernt sein. Es sieht so aus, als wäre jQuery meine einzige Lösung hier mit einem CSS-Top-Pad-Backup für das<main>
Element.position: sticky
developer.mozilla.org/en-US/docs/Web/CSS/position versucht , anstatt JS zu verwenden?Antworten:
Ich habe das gleiche Ergebnis erzielt (korrigiere mich, wenn ich falsch liege), aber ohne js. Und es scheint, dass jede Höhe des Headers vom Inhalt unten berücksichtigt wird.
Die Hauptidee - nicht zu wickeln
<header>
und darauf anzuwendenposition: sticky
,z-index
auch nicht notwendig.Ich habe nicht genau Ihren Code verwendet, aber versucht, das Ergebnis zu wiederholen. Ich hoffe, Sie finden einige nützliche Ideen für Ihr Problem.
Der Code einiger Antworten, wenn die Bildschirmbreite klein ist und das Menü umgeschaltet wird, drückt den Hauptinhalt nach unten. Mein Code enthält dieses Problem nicht.
quelle
Bitte entfernen Sie die ersten beiden oberen Div-Container des Header-Elements, da kein Header umbrochen werden muss. Header-Element ist bereits Container.
Bitte entfernen Sie
height:200rem;
im Header-Stil undpadding-top: 13rem or 5rem
für den Stil des Hauptelements.Zum Schluss aktualisieren Sie bitte die Positionseigenschaft des Header-Stils auf " klebrig"
absolute
und fügen einen Z-Index hinzu.Unten habe ich es getestet und die Codebasis aktualisiert.
quelle
Dies ist eine Art grober Hack, aber Sie könnten einen zweiten Header erstellen, der sich hinter dem echten versteckt, der im Dokumentenfluss bleibt und den nach unten drückt
<main>
.Duplizieren Sie einfach die Elemente, aus denen die Kopfzeile besteht, geben Sie ihnen eine niedrigere
z-index
und wechseln Sie vonposition: fixed
zuposition: relative
. Dann<header>
entfernen Sie einfach die Höhe des versteckten Elements und entfernen daspadding-top
von<main>
.Edit: Ich weiß nicht, warum ich vorher nicht daran gedacht habe. Einfach einstellen
#headwrap
und<main>
aufposition: relative
. Dann entfernen Sie dieheight
auf<main>
und Satz<body>
aufdisplay: flex
undflex-direction: column
. Zum Schluss wickeln Sie den Inhalt von<main>
in a<div>
.Hier habe ich die Höhe des Div auf 4000px eingestellt, um das Scrollen zu demonstrieren.
quelle
quelle
media-quires
ill schaffen es, die Polsterung jetzt anzupassen, es funktioniert gut, bitte überprüfen Sie und lassen Sie es mich wissensuchst du nicht eine Position: klebrig; oben: 0; ? Sie möchten ein Menü haben, das dem Benutzer folgt, wenn er richtig scrollt? Versuchen Sie dann, # bottom-container in zu ändern :
Und ich denke das ist es. Aber eines ist sicher - Sie müssen überdenken, wie Sie all diese Strukturen geschaffen haben, denn es ist höllisch chaotisch. Sie könnten die gleichen Ergebnisse erzielen mit:
html:
style.css:
Und kein JS, denn wenn Sie es nicht verwenden müssen. Ich hoffe das hilft.
quelle
Ich kann Ihnen ein Vanilla-JavaScript anstelle von jQuery anbieten…
Versuchen Sie, die Größe von "Header" beim Laden der Seite zu ermitteln (Onload-Ereignis) und fügen Sie sie dem Abstand von "main" hinzu:
Um zu arbeiten, habe ich dem "Header" und den "Haupt" -Elementen eine "ID" gegeben:
quelle