Saya memiliki cuplikan berikut (perlu melihat dalam mode layar penuh), yang saya coba untuk menempatkan <main>elemen langsung di bawah <header>elemen. Saya memiliki <header>posisi tetap karena saya ingin tetap di bagian atas layar saat pengguna menggulir konten di <main>elemen. Saya sudah mencoba semua yang saya tahu, tapi yang terbaik yang bisa saya lakukan adalah <header>menempatkan elemen di atas <main>elemen, yang memotong sebagian besar konten.
Solusi terdekat yang mungkin saya buat adalah dengan meletakkan padding yang ditebak pada <main>elemen sehingga akan menghapus <header>. Namun, solusi ini tidak memperhitungkan berbagai ukuran layar dengan sangat baik, karena saya menggunakan ukuran rem bukan px. Gagasan lapisan atas semakin buruk ketika menempatkan beberapa elemen di dalam <header>yang menggunakan ketinggian relatif atau persentase. Pada satu ukuran layar semuanya bisa berbaris sempurna, dan pada ukuran layar yang berbeda isinya bisa jauh.
Terakhir, saya tahu saya bisa menggunakan jQuery untuk mengatur bantalan atas secara dinamis, tetapi sepertinya tidak selalu berhasil dengan baik. Ingin tahu apakah ada solusi css / html murni.
Adakah yang bisa memberi tahu saya apa yang saya lewatkan di sini? Apakah metode top padding saya satu-satunya solusi yang bisa diterapkan?
$(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>
pada layar penuh utama sudah di bawah tajuk tetapi tidak di ponsel
—
Ayman Morsy
Itu karena padding-top ditempatkan pada
—
Austin
mainelemen. Kikuk, tapi itu agak berhasil. Ingin tahu apakah ada solusi yang lebih baik.
Saya tidak yakin apa yang Anda inginkan ini adalah pic setelah menonaktifkan border kuning ibb.co/bR0YykQ dapatkah Anda mengambil screen
—
shot
Contoh saya adalah versi sederhana dari versi live saya. Dalam versi langsung saya ada beberapa elemen fleksibel dalam
—
Austin
<header>elemen saya yang semuanya menggunakan persentase atau ketinggian relatif. Ini membuat menambahkan pad atas tetap ke <main>elemen hampir tidak berguna. The <main>elemen dapat berbaris dengan baik pada satu ukuran layar dan menjadi cara off yang lain. Sepertinya jQuery mungkin satu-satunya solusi saya di sini dengan back pad css pada <main>elemen.
Apakah Anda mencoba dengan CSS
—
Arthur
position: sticky developer.mozilla.org/en-US/docs/Web/CSS/position alih-alih menggunakan JS?