Tengo el siguiente fragmento (necesito ver en modo de pantalla completa), que estoy tratando de colocar el <main>elemento directamente debajo del <header>elemento. Tengo la <header>posición fija porque quiero que permanezca en la parte superior de la pantalla mientras el usuario se desplaza por el contenido del <main>elemento. He intentado todo lo que sé, pero lo mejor que puedo encontrar es tener el <header>elemento colocado encima del <main>elemento, lo que corta una gran parte del contenido.
La solución más cercana posible que se me ocurrió es colocar un relleno superior estimado en el <main>elemento para que se borre <header>. Sin embargo, esta solución no tiene en cuenta varios tamaños de pantalla muy bien, ya que estoy usando rem dimensionamiento en lugar de px. La idea de relleno superior empeora aún más cuando se colocan varios elementos dentro de la <header>altura relativa o porcentual. En un tamaño de pantalla, todo puede alinearse perfectamente, y en un tamaño de pantalla diferente, el contenido puede estar muy alejado.
Por último, sé que puedo usar jQuery para establecer dinámicamente el relleno superior, pero no siempre parece funcionar tan bien. Me pregunto si hay una solución css / html pura.
¿Alguien puede decirme lo que me falta aquí? ¿Es mi método de relleno superior la única solución viable?
$(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>fuente
mainelemento. Clunky, pero funciona un poco. Preguntándose si hay una mejor solución.<header>elemento que usan porcentajes o alturas relativas. Esto hace que agregar una almohadilla superior fija al<main>elemento sea casi inútil. El<main>elemento puede alinearse bien en un tamaño de pantalla y estar muy alejado en otro. Parece que jQuery puede ser mi única solución aquí con una copia de seguridad de la parte superior del CSS en el<main>elemento.position: stickydeveloper.mozilla.org/en-US/docs/Web/CSS/position en lugar de usar JS?Respuestas:
He obtenido el mismo resultado (corrígeme, si me equivoco), pero sin js. Y parece que cualquier altura de encabezado se considera por el contenido a continuación.
La idea principal : no envolverlo
<header>y aplicarloposition: sticky,z-indextampoco es necesario.No utilicé exactamente su código, pero intenté repetir el resultado. Espero que encuentre algunas ideas útiles para su problema.
El código de algunas respuestas cuando el ancho de la pantalla es pequeño y alterna el menú, empuja hacia abajo el contenido principal. Mi código no contiene ese problema.
fuente
Elimine los primeros dos contenedores div superiores del elemento de encabezado ya que no es necesario ajustar el encabezado. El elemento de encabezado ya es contenedor.
Elimine
height:200rem;en el estilo del encabezado ypadding-top: 13rem or 5rempara el estilo del elemento principal.Finalmente, actualice la propiedad de posición del estilo de encabezado a adhesivo en lugar de
absolutey agregue el índice z.A continuación, lo probé y actualicé la base de código.
fuente
Esto es una especie de truco, pero podría crear un segundo encabezado que se oculta detrás del real que permanece en el flujo de documentos y empuja hacia abajo
<main>.Simplemente duplica los elementos que componen el encabezado, dales un valor más bajo
z-indexy cambia deposition: fixedaposition: relative. Luego, elimine la altura del<header>elemento oculto y elimine elpadding-topde<main>.Editar: No sé por qué no pensé en esto antes. Solo configurar
#headwrapy<main>paraposition: relative. Luego, quite elheightencendido<main>y establezca<body>endisplay: flexyflex-direction: column. Finalmente, envuelva el contenido de<main>a<div>.Aquí, configuré la altura del div en 4000px para demostrar el desplazamiento.
fuente
fuente
media-quiresmal manejo para ajustar el relleno ahora funciona bien, por favor verifique y hágamelo saberno estás buscando posición: pegajoso; arriba: 0; ? ¿Desea tener un menú que sigue al usuario cuando se desplaza hacia la derecha? Luego intente cambiar # bottom-container a:
Y creo que eso es todo. Pero uno es seguro: debe repensar cómo creó toda esta estructura porque es desordenado como el infierno. Podrías obtener los mismos resultados con:
html:
style.css:
Y no JS porque si no tienes que no usarlo. Espero que esto ayude.
fuente
Puedo ofrecerte un Vanilla-JavaScript en lugar de jQuery ...
Intente obtener el tamaño del "encabezado" cuando se carga la página (evento de carga) y agréguelo al relleno de "main":
Para trabajar, le he dado un "id" a los elementos "header" y "main":
fuente