Question

我正在尝试建立一个网站，但在将位置属性应用于它时我感到困惑。 1.-我想在顶部创建一个导航栏，使用20％的网页和宽度：100％和固定位置 2.-在导航栏下面是图像滑块，其中一些图片宽度为100％，网页高度为60％。 3.-下面应该是宽度为100％，高度为20％的页脚，但我希望你可以向下滚动一点。

所以我尝试了类似这样的东西..建议真的是apreciated ..我定义宽度和高度％，因为我想调整网页大小如果浏览器窗口调整大小

谢谢！

<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>

Answer 1

除了少数拼写错误和缺失的魔法html, body: 100%之外，你几乎有这个正确的，它为你提供了一个定义高度的参考点。

您有.body，但应该只有body
您在;样式中遗漏了两个.slider，导致其他样式被忽略
您将.slider的高度定义为20％，但您希望它为60％。
color: lightBlue个样式

background: lightBlue

.footer

这就是你需要的：

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%;
}

Demo

注意：不太清楚你想要一点滚动的意思，但如果你真的希望它滚动，你可以使页脚超过20％。

如何使用定位属性网站

1 个答案: