Question

我对此是陌生的，所以如果我偏离轨道，请原谅。

我正在玩一个以页面为中心的网站。我想要的是填补下面的空白，但我似乎不知道该怎么做，或者甚至可能。我可能在解释我想做的事情上做得很差，所以我会附上一张现在的样子以及我希望它变得更容易理解的样子。

我该如何处理我的代码？甚至有可能吗？

html {
  background-color: lightgrey;
}

body {
  display: flex;
  flex-direction: row;
  width: 960px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
}

nav {
  background-color: black;
  width: 200px;
  height: 400px;
}

#box1 {
  background-color: blue;
  width: 200px;
  height: 100px;
}

#box2 {
  background-color: purple;
  width: 200px;
  height: 100px;
}

#box3 {
  background-color: yellow;
  width: 200px;
  height: 100px;
}

#box4 {
  background-color: red;
  width: 200px;
  height: 100px;
}

main {
  background-color: green;
  width: 100vw;
  height: 100vh;
}

<body>
  <nav>
    <div id="box1">
    </div>
    <div id="box2">
    </div>
    <div id="box3">
    </div>
    <div id="box4">
    </div>
  </nav>
  <main>
  </main>
</body>

Answer 1

您需要像这样将div元素放入主标签内

html {
    background-color: lightgrey;
}

body {
    display: flex;
    flex-direction: row;
    width: 960px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
}

nav {
    background-color: black;
    width: 200px;
    height: 400px;
}

#box1 {
    background-color: blue;
    width: 200px;
    height: 100px;
}

#box2 {
    background-color: purple;
    width: 200px;
    height: 100px;
}

#box3 {
    background-color: yellow;
    width: 200px;
    height: 100px;
}

#box4 {
    background-color: red;
    width: 200px;
    height: 100px;
}

main {
    background-color: green;
    width: 100vw;
    min-height: 100vh;
}

<main>
<nav>
    <div id="box1">
    </div>
    <div id="box2">
    </div>
    <div id="box3">
    </div>
    <div id="box4">
    </div>
</nav>

</main>

Answer 2

由于您要在<main>之外构建<nav>，因为它位于右侧，因此您可以将position css属性添加到nav，它将位于主目录的顶部，如果您要这样做，那么是否要在导航下方找到特定内容？

https://jsfiddle.net/bz1wa0my/

https://css-tricks.com/almanac/properties/p/position/

有没有一种方法可以使nav和main对齐，以便main填充空白页面？

2 个答案: