Question

所以基本上我试图实现this design，但this是我到目前为止所做的。

你可以看到它有很多错误，但我不知道如何修复它们......

侧边栏不会粘在页面底部，
我无法将padding添加到侧边栏，因为如果我这样做，它会移动，
另外，为了让菜单和徽标留在那里，我做错了。

以下是代码：

＆＃13;

* {
  font-family: Arial;
}
body {
  background: url(bg.jpg) no-repeat;
  background-size: 100%;
  height: auto;
  width: 850px;
  margin: 0 auto;
  background-attachment: scroll;
  background-position: center;
}
header {
  background: #343843;
  color: white;
  height: 80px;
}
header a {
  color: #24272e;
  background: aqua;
  text-decoration: none;
  padding: 60px 40.5px;
}
nav {
  background: #24272e;
  color: white;
  height: 30px;
  width: 675px;
  float: right;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  list-style: none;
  display: inline-block;
  padding: 5px 10px;
  margin-left: -10;
}
nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
}
section {
  background: #ffffff;
  color: darkgray;
  width: 675px;
  float: right;
}
article {
  background: #fff;
  color: #000;
}
aside {
  background: #343843;
  float: left;
  width: 175px;
  height: 100%;
  display: inline-block;
  margin-top: -30px;
}
footer {
  background: #20232a;
  position: relative;
  margin-top: -65px;
  clear: both;
  width: 100%;
}

＆＃13;

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Titulo de la web</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <a href="index.html" class="logo">Condominios</a>
  </header>
  <nav>
    <ul>
      <li><a href="index.html" tittle="home">Home</a>
      </li>
    </ul>
  </nav>
  <section>
    <article>
      <h2>Titilo de contenido</h2>
      <p>Contenido</p>
    </article>
  </section>
  <aside>
    <h3>Titulo de contenido</h3>
    <p>contenido</p>
  </aside>
  <footer>
    Creado
  </footer>
</body>

</html>

＆＃13;

Answer 1

将height:100%添加到您的html，body，然后进行一些调整......

＆＃13;

html,
body {
  height: 100%
}
body {
  background: url(bg.jpg) no-repeat;
  background-size: 100%;
  background-attachment: scroll;
  background-position: center;
  width: 850px;
  margin: 0 auto;
  font-family: Arial
}
header {
  background: #343843;
  color: white;
  height: 80px;
}
header a {
  color: #24272e;
  background: aqua;
  text-decoration: none;
  padding: 60px 40.5px;
}
nav {
  background: #24272e;
  color: white;
  height: 30px;
  width: 675px;
  float: right;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  list-style: none;
  display: inline-block;
  padding: 5px 10px;
  margin-left: -10;
}
nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
}
section {
  background: #ffffff;
  color: darkgray;
  width: 675px;
  float: right;
  height: 100%;
  background: red
}
article {
  background: #fff;
  color: #000;
}
aside {
  background: #343843;
  float: left;
  width: 175px;
  height: 100%;
  display: inline-block;
  margin-top: -30px;
  height: calc(100% + 30px)
}
footer {
  background: #20232a;
  position: relative;
  margin-top: -65px;
  clear: both;
  width: 100%;
}

＆＃13;

<header>
  <a href="index.html" class="logo">Condominios</a>
</header>
<nav>
  <ul>
    <li><a href="index.html" tittle="home">Home</a>
    </li>
  </ul>
</nav>
<section>
  <article>
    <h2>Titilo de contenido</h2>
    <p>Contenido</p>
  </article>
</section>
<aside>
  <h3>Titulo de contenido</h3>
  <p>contenido</p>
</aside>
<footer>
  Creado
</footer>

＆＃13;

侧边栏不会粘到底部，还有其他错误

1 个答案: