Question

我们在课堂上开始了有关网格和MediaQuery的新“章节”，我需要这样做。作业严重缺乏指导，因此我需要提示要做什么。

这就是我要做的（只有8秒的视频）：https://www.youtube.com/watch?v=9f3FSxzl9jA

HTML

<!DOCTYPE html>
<html lang="fr">
   <head>
      <title>Labo 8 – Grid </title>
      <!-- Laboratoire 8 – Web Adaptatif-->
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/style1.css">
   </head>
   <body>
      <header>
         <div>header</div>
      </header>
      <main>
         <div>main</div>
      </main>
      <footer>
         <div>footer</div>
      </footer>
   </body>
</html>

CSS

header div{
    border: 2px solid black;
    width: 500px;
    height: 100px;
    position: fixed;
    top:0px;
    left:0px;
}
main div{
    border: 2px solid black;
    width: 800px;
    height: 525px;
    position: relative;
    top: 100px;
    margin: auto;

}
footer div{
    border: 2px solid black;
    width: 500px;
    height: 100px;
    position: fixed;
    bottom:0px;
    right: 0px;
}

这是我到目前为止的内容：https://jsfiddle.net/ojabdxet/ （在底部的jsfiddle窗口中看起来不太好，但更像我在浏览器窗口中需要做的事情）

我觉得自己处在正确的轨道上（也许不是），但是当我像视频中那样逐渐减小尺寸时，我的页眉和页脚div并没有缩小。无论如何，谢谢您的帮助。

Answer 1

在这里，您只需更改以下代码，还可以找到我的评论以获取详细信息。

main div{
    border: 2px solid black;
    width: 800px;
    /* this will minus the height of header and footer and give you the expected result */ 
    height: calc(100vh - 220px);
    position: relative;
    top: 100px;
    margin: auto;

}

减小窗口大小时的HTML / CSS div位置

1 个答案: