我正在尝试建立一个网站，但在对其应用位置属性时感到困惑。 1.-我想在顶部创建一个导航栏，使用 20% 的网站页面和宽度:100% 和固定位置 2.- 在导航栏下方有图像 slider ，其中一些图片的宽度为 100%，高度为网页的 60%。 3.- 在那下面应该是宽度为 100% 和高度为 20% 的页脚，但我希望您可以向下滚动一点。
所以我尝试了类似的方法..建议真的很感激..我以 % 定义宽度和高度，因为如果调整浏览器窗口大小时我想调整网页大小
谢谢!
<head>
<style>
.body {
margin: 0 0 0 0;
.navigation {
background-color: lightyellow;
width:100%;
height:20%;
position:fixed;
}
.slider{
position: absolute;
top:20%
height:60%;
width:100%
background-color: lightgreen;
}
.footer{
position:relative;
top:80%;
color:lightblue;
height:20%;
width:100%
}
</style>
</head>
<body>
<div class="navigation">
</div>
<div class="slider">
</div>
<div class="footer">
</div>
</body>
最佳答案
除了一些拼写错误和缺少神奇的 html, body: 100% 之外，您几乎是正确的，它为您提供了定义高度的引用点。
- 你有
.body但应该只有body - 您在
.slider样式中缺少两个;导致其他样式被忽略 - 您将
.slider的高度定义为 20%，但您希望它为 60%。 - 您在
.footer样式中使用了color: lightBlue而不是background: lightBlue
这是你需要的:
html, body {
height: 100%;
}
body {
margin: 0;
}
.navigation {
background-color: lightyellow;
width:100%;
height:20%;
position:fixed;
}
.slider {
position: absolute;
top:20%;
height:20%;
width:100%;
background-color: lightgreen;
}
.footer {
position: relative;
top: 80%;
background-color: lightblue;
height: 20%;
width: 100%;
}
注意:不太清楚你想要滚动一点是什么意思，但如果你真的想让它滚动，你可以让页脚超过 20%。
关于css - 如何使用定位属性网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22797665/