Html 实现了特定的布局，但我得到了不同的东西

发布于06月06日

我想实现一个特定的布局，但当我try 这样做，它得到了所有的秩序.我希望它像这张照片一样.有人能帮忙吗？

body {
  margin: 0px;
}

.top {
  width: 100%;
  background-color: blue;
  height: 40px;
  color: white;
}

.content {
  margin-left: 100px;
  height: 100%;
}

.sidebar {
  width: 100px;
  position: fixed;
  height: 100%;
  background-color: red;
}

.footer {
  height: 40px;
  width: 100%;
  background-color: black;
}

<div class="sidebar"></div>

<div class="content">
  <div class="top">My website example</div>

  <p>I start here</p>
</div>

<div class="footer"></div>

推荐答案

嗯，你的页脚上只漏了一些东西.如果你想让它在一个特定的位置，你应该使用position: absolute或position: fixed，就像你在sidebar上使用的一样.并插入bottom: 0，表示您希望它位于底部，而不是顶部或右/左.

body {
  margin: 0px;
}

.top {
  width: 100%;
  background-color: blue;
  height: 40px;
  color: white;
}

.content {
  margin-left: 100px;
  height: 100%;
}

.sidebar {
  width: 100px;
  position: fixed;
  height: 100%;
  background-color: red;
}

.footer {
  height: 40px;
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0;
}

<div class="sidebar"></div>
<div class="content">
  <div class="top">My website example</div>
  <p>
    I start here
  </p>
</div>
<div class="footer"></div>