css 代码不能正常工作

Question

这是我第一次写自己的css文件。

一切正常，但我的菜单/内容宽度有问题。 我正在使用百分比来填充整个屏幕。 剩下一些空白，当我调整浏览器宽度时，它完全坏了（菜单/内容）。

代码：

header {
background-color: black;
color: white;
text-align: center;
width: 100%;
height: 20%;
margin: 0px;
padding: 10px;
}

menu {
background-color: gray;
color: white;
height: 60%;
width: 10%;
float: left;
margin: 0px;
padding: 10px;
}

content {
background-color: blue;
float: left;
color: white;
width: 87%;
height: 60%;
margin: 0px;
padding: 10px;
}

footer {
clear: both;
background-color: black;
color: white;
width: 100%;
height: 20%;
margin: 0px;
padding: 10px;
}

这是我的测试网址：测试网址

Answer 1

我想这就是你的目标。

body {
  margin:0;
}

header {
  background-color: black;
  color: white;
  text-align: center;
  width: 100%;
  height: 20%;
  margin: 0px;
}

menu {
  background-color: gray;
  color: white;
  height: 60%;
  width: 10%;
  float: left;
  margin: 0px;
  -webkit-padding-start: 0px;
}

content {
  background-color: blue;
  float: left;
  color: white;
  width: 90%;
  height: 60%;
  margin: 0px;
}

footer {
  clear: both;
  background-color: black;
  color: white;
  width: 100%;
  height: 20%;
  margin: 0px;
}