我试图做到这一点,以便在我网站的主页上,当我加载到该网站时,您只能看到导航、标题、图像和下面的一些文本,不应显示红色的 div 元素,并且您必须向下滚动才能看到它。如何在使页面响应的同时做到这一点?
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
h3 {
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
p {
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {}
img {
height: 10%;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
margin: 10px;
padding: 0px;
overflow: hidden;
}
li {
float: left;
padding: 1%;
font-family: 'Raleway', sans-serif;
}
li a {
text-decoration: none;
color: black;
}
li a.active {
text-decoration: underline;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
}
/*text that needs to stay on home page under image*/
.text {
text-align: center;
}
/*what needs to be hidden*/
.container1 {
padding: 40px;
background-color: red;
text-align: center;
}
/*Area with title and image*/
.header {
padding: 30px;
font-size: 40px;
text-align: center;
grid-area: banner;
width: 100%;
color: black;
}
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Raleway:200,400" rel="stylesheet">
<div class="nav">
<ul>
<li><a href="index.html" class="active">Learning Journal</a></li>
<li>Tutorial</li>
<li>Contact Me</li>
</ul>
</div>
<div class="header">
<h2> CI435 - INTRODUCTION TO WEB DEVELEPMONT</h2>
<img src="images/htmlcode.jpg" alt="">
</div>
<div class="text">
<h2>PLACEHOLDER</h2>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
最佳答案
您正在寻找 height: 100vh
(视口(viewport)单元)。
您还需要包装您的 .header
和 .text
占位符放入父元素中,以便您可以控制高度。我已将其包装到 <main class="full-height"
中元素和样式类 .full-height { height: 100vh; }
现在,无论设备有多大/多小,用户都被迫滚动到红色。
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
h3 {
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
p {
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {}
img {
height: 10%;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
margin: 10px;
padding: 0px;
overflow: hidden;
}
li {
float: left;
padding: 1%;
font-family: 'Raleway', sans-serif;
}
li a {
text-decoration: none;
color: black;
}
li a.active {
text-decoration: underline;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
}
.text {
text-align: center;
}
.container1 {
padding: 40px;
background-color: brown;
text-align: center;
}
.header {
padding: 30px;
font-size: 40px;
text-align: center;
grid-area: banner;
width: 100%;
color: black;
}
.full-height { height: 100vh; }
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<div class="nav">
<ul>
<li><a href="index.html" class="active">Learning Journal</a></li>
<li>Tutorial</li>
<li>Contact Me</li>
</ul>
</div>
<main class="full-height">
<div class="header">
<h2> CI435 - INTRODUCTION TO WEB DEVELEPMONT</h2>
<img src="images/htmlcode.jpg" alt="">
</div>
<div class="text">
<h2>PLACEHOLDER</h2>
</div>
</main>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
关于HTML 内容填充页面,但可以滚动到其他内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53836524/