Tôi có đoạn mã sau (cần xem ở chế độ toàn màn hình), rằng tôi đang cố gắng đặt <main>phần tử ngay dưới <header>phần tử. Tôi có <header>một vị trí cố định vì tôi muốn nó ở trên cùng của màn hình khi người dùng cuộn qua nội dung trong <main>phần tử. Tôi đã thử mọi thứ tôi biết, nhưng điều tốt nhất tôi có thể nghĩ ra là có <header>yếu tố được đặt lên hàng đầu<main> phần tử, phần này cắt bỏ phần lớn nội dung.
Giải pháp gần nhất có thể mà tôi đã đưa ra là đặt một phần đệm trên cùng được dự đoán vào <main>phần tử để nó sẽ xóa <header>. Tuy nhiên, giải pháp này không giải thích cho các kích thước màn hình khác nhau rất tốt, vì tôi đang sử dụng kích thước rem thay vì px. Ý tưởng đệm hàng đầu thậm chí còn tồi tệ hơn khi đặt một số yếu tố bên trong<header> sử dụng chiều cao dựa trên tỷ lệ tương đối hoặc tỷ lệ phần trăm. Trên một kích thước màn hình, mọi thứ có thể xếp hàng hoàn hảo và trên một kích thước màn hình khác, nội dung có thể tắt.
Cuối cùng, tôi biết rằng tôi có thể sử dụng jQuery để thiết lập phần đệm hàng đầu một cách linh hoạt, nhưng dường như không phải lúc nào nó cũng hoạt động tốt. Tự hỏi là có một giải pháp css / html thuần túy.
Bất cứ ai có thể cho tôi biết những gì tôi đang thiếu ở đây? Là phương pháp đệm hàng đầu của tôi là giải pháp khả thi duy nhất?
$(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>
trên toàn màn hình chính đã có dưới tiêu đề nhưng không có trong điện thoại di động
—
Ayman Morsy
Đó là bởi vì phần đệm được đặt trên
—
Austin
mainphần tử. Clunky, nhưng nó là loại công trình. Tự hỏi nếu có một giải pháp tốt hơn.
Tôi không chắc bạn muốn gì đây là pic sau khi vô hiệu hóa viền vàng ibb.co/bR0YykQ bạn có thể chụp ảnh màn hình không
—
Ayman Morsy
Ví dụ của tôi là một phiên bản đơn giản hóa của phiên bản trực tiếp của tôi. Trong phiên bản trực tiếp của tôi, có một số yếu tố flex trong
—
Austin
<header>phần tử của tôi , tất cả đều sử dụng tỷ lệ phần trăm hoặc chiều cao tương đối. Điều này làm cho việc thêm một miếng đệm cố định vào <main>phần tử gần như vô dụng. Phần <main>tử có thể xếp hàng tốt trên một kích thước màn hình và tắt trên một kích thước khác. Có vẻ như jQuery có thể là giải pháp duy nhất của tôi ở đây với phần đệm trên cùng của <main>phần mềm.
Bạn đã thử với CSS
—
Arthur
position: sticky developer.mozilla.org/en-US/docs/Web/CSS/poseition thay vì sử dụng JS?