使用 CSS 网格和布局对齐方式
Working with CSS Grid and layout alignment
我试图在整个 css 网格后面放置一个背景，您可以在正文中看到番茄颜色，但我希望该背景颜色完全围绕主标记。我尝试了很多不同的方式来包装它，但我有一些东西是冲突的。
另一件事是我无法让 gird 也从导航栏下方开始，我希望导航栏在顶部伸展并且在页面首次加载时不重叠。我不确定是否正确的方法是只留出保证金。我想还有其他方法可以做到这一点。
这是一个jsfiddle
body {
background: tomato;
/* font-family: Helvetica, Arial, sans-serif;
line-height: 1.5; */
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
margin: 0px auto;
padding: 0px;
width:80%
}
html{
background: linear-gradient(to right, palegreen,paleturquoise, plum);
}
/* main */
main{
width: 85%;
height: 80px;
margin:.5em auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
main > div:nth-child(odd){
background: peachpuff;
}
main > div {
background: palegreen;
padding: 1em;
border-radius: 20px;
}
显示发生了什么，所以如果有人知道如何修复它，请告诉我。
删除 main 中的 height 将解决背景颜色问题。
main{
width: 85%;
margin:.5em auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
将 left:0 添加到顶部导航栏。
nav{
width: 100%;
overflow: auto;
background: rgba(255, 255, 255, 0.507);
display:grid;
grid-template-columns: repeat(3, 1fr);
height: 50px;;
position: fixed;
top:0;
left: 0px; /*add this to stretch */
}
将 margin-top 交给 main 是个不错的主意。这是正常的做法。
您的 main 元素的固定高度为 80px，我将其删除。
为了开始导航栏后面的内容，我加了一个margin-top的height的navbar。
如果您的导航栏可能具有动态高度，您也可以通过 Javascript 来完成，请参阅 this post to get the height and on how to apply css via js。
body {
background:tomato;
/* font-family: Helvetica, Arial, sans-serif;
line-height: 1.5; */
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
margin: 0px auto;
padding: 0px;
width:80%;
}
html{
background: linear-gradient(to right, palegreen,paleturquoise, plum);
}
/* nav top bar */
nav{
width: 100%;
overflow: auto;
background: rgba(255, 255, 255, 0.507);
display:grid;
grid-template-columns: repeat(3, 1fr);
height: 50px;
position: fixed;
top:0;
}
/* logo adjustments */
#logo{
text-align: center;
}
#logo > img{
border-radius: 20%;
height: 35px;
margin: .5em;
}
/* main */
main{
width: 85%;
margin:.5em auto;
margin-top: 50px;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
main > div:nth-child(odd){
background: peachpuff;
}
main > div {
background: palegreen;
padding: 1em;
border-radius: 20px;
}
/* Side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay on top */
left: 0;
background-color: #111; /*black*/
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
overflow-x: hidden;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link rel="stylesheet" href="css/backgroundgrid.css">
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script" type='text/css'>
</head>
<body>
<header>
<nav>
<div id="sideNavBar" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="resume.html">Resume</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</div>
<!-- Use any element to open the sidenav -->
<span style="font-size:35px;cursor:pointer;margin-left:.5em;" onclick="openNav()">☰ </span>
<span id="logo">
<img src="images/logosamuelsmall.png">
</span>
</nav>
</header>
<main>
<div>gfdgdf</div>
<div>
<div class="card-container">
<div class="card">
<div class="side">
<h3 class="heading-banner head-text">Background</h3>
</div>
<div class="side back">
<ul>
<li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
and has heart. I've lived in lots of different places and have worked in lots of different
jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
<li>I've been working with technology, customer support and sales for 10+ years. </li>
<li>I love music, cooking and learning</li>
</ul>
</div>
</div>
</div>
</div>
<div>gfdgdf</div>
<div>
<div class="card-container">
<div class="card">
<div class="side">
<h3 class="heading-banner head-text">Background</h3>
</div>
<div class="side back">
<ul>
<li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
and has heart. I've lived in lots of different places and have worked in lots of different
jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
<li>I've been working with technology, customer support and sales for 10+ years. </li>
<li>I love music, cooking and learning</li>
</ul>
</div>
</div>
</div>
</div>
<div>gfdgdf</div>
<div>
<div class="card-container">
<div class="card">
<div class="side">
<h3 class="heading-banner head-text">Background</h3>
</div>
<div class="side back">
<ul>
<li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
and has heart. I've lived in lots of different places and have worked in lots of different
jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
<li>I've been working with technology, customer support and sales for 10+ years. </li>
<li>I love music, cooking and learning</li>
</ul>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
我试图在整个 css 网格后面放置一个背景，您可以在正文中看到番茄颜色，但我希望该背景颜色完全围绕主标记。我尝试了很多不同的方式来包装它，但我有一些东西是冲突的。
另一件事是我无法让 gird 也从导航栏下方开始，我希望导航栏在顶部伸展并且在页面首次加载时不重叠。我不确定是否正确的方法是只留出保证金。我想还有其他方法可以做到这一点。
这是一个jsfiddle
body {
background: tomato;
/* font-family: Helvetica, Arial, sans-serif;
line-height: 1.5; */
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
margin: 0px auto;
padding: 0px;
width:80%
}
html{
background: linear-gradient(to right, palegreen,paleturquoise, plum);
}
/* main */
main{
width: 85%;
height: 80px;
margin:.5em auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
main > div:nth-child(odd){
background: peachpuff;
}
main > div {
background: palegreen;
padding: 1em;
border-radius: 20px;
}
显示发生了什么，所以如果有人知道如何修复它，请告诉我。
删除 main 中的 height 将解决背景颜色问题。
main{
width: 85%;
margin:.5em auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
将 left:0 添加到顶部导航栏。
nav{
width: 100%;
overflow: auto;
background: rgba(255, 255, 255, 0.507);
display:grid;
grid-template-columns: repeat(3, 1fr);
height: 50px;;
position: fixed;
top:0;
left: 0px; /*add this to stretch */
}
将 margin-top 交给 main 是个不错的主意。这是正常的做法。
您的 main 元素的固定高度为 80px，我将其删除。
为了开始导航栏后面的内容，我加了一个margin-top的height的navbar。
如果您的导航栏可能具有动态高度，您也可以通过 Javascript 来完成，请参阅 this post to get the height and on how to apply css via js。
body {
background:tomato;
/* font-family: Helvetica, Arial, sans-serif;
line-height: 1.5; */
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
margin: 0px auto;
padding: 0px;
width:80%;
}
html{
background: linear-gradient(to right, palegreen,paleturquoise, plum);
}
/* nav top bar */
nav{
width: 100%;
overflow: auto;
background: rgba(255, 255, 255, 0.507);
display:grid;
grid-template-columns: repeat(3, 1fr);
height: 50px;
position: fixed;
top:0;
}
/* logo adjustments */
#logo{
text-align: center;
}
#logo > img{
border-radius: 20%;
height: 35px;
margin: .5em;
}
/* main */
main{
width: 85%;
margin:.5em auto;
margin-top: 50px;
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1em;
}
main > div:nth-child(odd){
background: peachpuff;
}
main > div {
background: palegreen;
padding: 1em;
border-radius: 20px;
}
/* Side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay on top */
left: 0;
background-color: #111; /*black*/
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
overflow-x: hidden;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link rel="stylesheet" href="css/backgroundgrid.css">
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script" type='text/css'>
</head>
<body>
<header>
<nav>
<div id="sideNavBar" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="resume.html">Resume</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
</div>
<!-- Use any element to open the sidenav -->
<span style="font-size:35px;cursor:pointer;margin-left:.5em;" onclick="openNav()">☰ </span>
<span id="logo">
<img src="images/logosamuelsmall.png">
</span>
</nav>
</header>
<main>
<div>gfdgdf</div>
<div>
<div class="card-container">
<div class="card">
<div class="side">
<h3 class="heading-banner head-text">Background</h3>
</div>
<div class="side back">
<ul>
<li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
and has heart. I've lived in lots of different places and have worked in lots of different
jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
<li>I've been working with technology, customer support and sales for 10+ years. </li>
<li>I love music, cooking and learning</li>
</ul>
</div>
</div>
</div>
</div>
<div>gfdgdf</div>
<div>
<div class="card-container">
<div class="card">
<div class="side">
<h3 class="heading-banner head-text">Background</h3>
</div>
<div class="side back">
<ul>
<li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
and has heart. I've lived in lots of different places and have worked in lots of different
jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
<li>I've been working with technology, customer support and sales for 10+ years. </li>
<li>I love music, cooking and learning</li>
</ul>
</div>
</div>
</div>
</div>
<div>gfdgdf</div>
<div>
<div class="card-container">
<div class="card">
<div class="side">
<h3 class="heading-banner head-text">Background</h3>
</div>
<div class="side back">
<ul>
<li>I'm an aspiring software engineer who loves creating new software that is playful, interactive
and has heart. I've lived in lots of different places and have worked in lots of different
jobs. I’m excited to work on teams that support, learn, and build the amazing. </li>
<li>I've been working with technology, customer support and sales for 10+ years. </li>
<li>I love music, cooking and learning</li>
</ul>
</div>
</div>
</div>
</div>
</main>
</body>
</html>