如何拉伸导航栏并应创建侧面div或背景图像？

Question

我有两个问题，我似乎无法弄明白。

无论出于何种原因，我似乎无法拉伸导航栏以填充其旁边div的高度/长度（div#textarea），同时保持菜单本身的文本位于中心那个div。

另一个问题是我想在页面右侧创建一个侧栏。现在问题是，我是否应该为此创建div，还是应该创建完整的背景图像？ （背景中的所有内容＆＃39;图像＆＃39;除侧边栏外都是白色的，它们将采用不同的颜色。）

这是我到目前为止用红线显示我想要的地方的图像：

（底部的紫色div原本是侧栏，我在其中放了一些文字，以便你可以看到它

基本上，总结一下，这些是我的问题：

1. 如何伸展长度/高度的导航栏？
2. 我应该创建一个边div或背景图片还是其他东西？（注意：右上角的徽标图片部分是这样的）
＆＃13;
＆＃13;
body {
  background-color: gray;
}
#page {
  margin: 0 auto;
  word-wrap: break-word;
}
#nav,
#textarea,
#contactallpages {
  display: inline-block;
}
#containerpage {
  display: inline-block;
  margin: auto;
  text-align: center;
}
#centercontainer {
  background-color: lightblue;
  width: 85%;
  margin: 0 auto;
  padding: 0.5%;
}
#nav {
  background: #aaaaaa;
  width: 10%;
  padding: 1%;
  border-radius: 25% 0% 0% 0%;
  text-align: center;
  vertical-align: bottom;
}
#textarea {
  background: #cccccc;
  height: 70%;
  width: 60%;
  padding-top: 5%;
  padding: 3%;
  border-radius: 0% 10% 0% 0%;
  text-align: left;
}
#contactallpages {
  background: #bbbbbb;
  vertical-align: bottom;
  width: 10%;
  padding: 1%;
  font-size: 0.8em;
  border-radius: 0% 5% 25% 0%;
}
#purplebanner {
  background-color: purple;
}
＆＃13;
<div id="containerpage">
  <div id="centercontainer">
    <div id="nav">
      <ul>
        <li><a href="index.html" class="selected">Home</a>
        </li>
        <li><a href="#">About me</a>
        </li>
        <li><a href="#">more</a>
        </li>
        <li><a href="#">links</a>
        </li>
        <li><a href="#">in menut</a>
        </li>
      </ul>
    </div>
    <!--

        -->
    <div id="textarea">
      <header>
        <h1>Welcome</h1>
      </header>
      <p>
        text text text
      </p>
      <p>
        text text text
      </p>
    </div>
    <!--

        -->
    <div id="contactallpages">
      Contact info
      <br>Name person
      <br>
      <br>Address
      <br>more lines
      <br>
      <br>
      <u>Telephone:</u>
      <br>numbers
      <br>
      <u>E-mail:</u>
      <br>address thingey
    </div>

  </div>

  <div id="purplebanner">
    text
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

要回答问题1，我会在您的整个页面容器中放置overflow: hidden;，然后分解您拥有的第二个容器（#centercontainer）。使用#container_left导航到自己的容器（类似float: left;）。然后将所有其他内容放入第二个容器（类似#container_right）和float: left;。

一个有用的提示是在您的所有容器上执行border: 1px solid red;，以便了解div所在的位置。