我正在制作我的第一个作品集,但在做两件事时遇到了一些麻烦。
创建一个固定的导航栏。当我使用 position: fixed;它清除了我在右侧“联系我”上的 float ,一切都崩溃了。在我的示例中,我需要它来保持间距。搜索了好几个小时,但到目前为止我还找不到修复程序,尽管我是新手,所以我相信这也有一些影响。
对于我的着陆页照片,我正在尝试进行响应式设计,使其能够调整为可用页面大小的 100%。我已经用 height: 100vh 实现了这个;但是很快注意到它正在使用 100vh,并在我的导航栏之后执行此操作,这会在下方留下多余的部分。我试图通过减少 vh 来补偿导航栏,但我当然意识到这不是一个很好的修复,因为它只适用于该视口(viewport)高度,而不是相应地缩放。 这让我要么需要修复以适本地缩放内容,要么允许照片在导航栏下方滑动并占据该空间,以便它触及页面顶部。
相关的 HTML:
<header>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#mywork">My Work</a></li>
<li style="float:right"><a href="#contact">Contact Me</a></li>
</ul>
</div>
</header>
<main>
<section class="homeLanding">
<h1>Hi, I'm Michael.</h1>
<p>A Front-End Web Dev</p>
<a href="#aboutMe" class="myBtn">Start here to learn more about me,
<br>and how I can help you</a>
</section>
相关 CSS:
body {
margin: 0;
}
/** style navbar **/
.navbar ul {
background-color: #333;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
text-align: center;
text-decoration: none;
color: white;
padding: 14px 16px;
}
.navbar li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/** style landing page **/
.homeLanding {
height: 100vh;
width: 100%;
margin: auto;
background: url(/**Insert Image**/);
display: flex;
background-size: cover;
background-position: center;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
top: 0;
}
.myBtn {
color: white;
text-decoration: none;
border: solid 3px white;
border-radius: 6px;
padding: 7px 7px 0px 7px;
}
p, h1 {
color: white;
}
背景图片:http://res.cloudinary.com/dtgbwo6mf/image/upload/v1502053498/bg_b0vucn.jpg
最佳答案
要点 1
为了拥有position: fixed
在你的导航栏上而不丢失它的布局,你需要做的就是确保应用 width: 100%
要点 2
您正在寻找的是利用 CSS 的 calculation-driven values .
通过这种方式,您可以告诉您 body 占据垂直高度的 100% 减去 导航栏的高度,使用 height: calc(100v - 46px)
.
这是一个完整的示例:
body {
margin: 0;
}
/** style navbar **/
.navbar {
position: fixed;
width: 100%;
}
.navbar ul {
background-color: #333;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
text-align: center;
text-decoration: none;
color: white;
padding: 14px 16px;
}
.navbar li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/** style landing page **/
.homeLanding {
padding-top: 46px;
height: calc(100vh - 46px);
width: 100%;
margin: auto;
background: url('http://res.cloudinary.com/dtgbwo6mf/image/upload/v1502053498/bg_b0vucn.jpg');
display: flex;
background-size: cover;
background-position: center;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
top: 0;
}
.myBtn {
color: white;
text-decoration: none;
border: solid 3px white;
border-radius: 6px;
padding: 7px 7px 0px 7px;
}
p,
h1 {
color: white;
}
<header>
<div class="navbar">
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#mywork">My Work</a></li>
<li style="float:right"><a href="#contact">Contact Me</a></li>
</ul>
</div>
</header>
<main>
<section class="homeLanding">
<h1>Hi, I'm Michael.</h1>
<p>A Front-End Web Dev</p>
<a href="#aboutMe" class="myBtn">Start here to learn more about me,
<br>and how I can help you</a>
</section>
<section class="homeLanding">
<h1>SAMPLE EXTRA PADDING</h1>
<p>SAMPLE EXTRA PADDING</p>
<a href="#aboutMe" class="myBtn">SAMPLE EXTRA PADDING
<br>SAMPLE EXTRA PADDING</a>
</section>
请注意,我添加了第二个 <section>
到 HTML 以演示固定导航栏的滚动效果。
希望对您有所帮助! :)
关于html - 需要一个固定的导航栏和包含导航栏高度的登录页面 VH,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45537828/