CSSが思うようにならない（ダッシュボードの項目)

Question

実現したいこと

練習でダッシュボード風なものを作成しています。
赤の部分をヘッダーと左のリスト内の白い部分に納め、下にはスクロールできるようにしたい。
他の項目をクリックすると色が変わるようにしたいです。
現在の状況はスクショに示しています。

<header>
	<p>ダッシュボードを作りたい</p>
	<nav>
		<ul>
			<li>Swift</li>
			<li>rails</li>
			<li>漫画</li>
		</ul>
	</nav>
</header>

<ul class="dashboard">
  <li>ドロップダウン</li>
  <li>プロフィール</li>
  <li>予約チケット</li>
  <li>スケジュール</li>
  <li>売上管理</li>
</ul>
<div class="content"></div>

header {
  position: fixed;
  top: 0px;
  left: 0px;
	height: 100px; /*ヘッダーの高さ*/
	width: 100%; /*ヘッダーの横幅*/
	background-color: #1d2731; /*ヘッダーの背景色*/
	color: white; /*ヘッダーの文字の色*/
}

header p {
	line-height: 100px; /*行の高さ*/
	float: left; /*左に流す*/
	font-size: 30px; /*文字の大きさ*/
	margin-left: 100px; /*左にマージンを取っている*/
}

header nav {
	float: left; /*左に流す*/
	margin-left: 500px; /*左にマージンを取っている*/
}

header li {
	line-height: 100px; /*行の高さ*/
	float: left; /*左に流す*/
	margin-left: 30px; /*li間の幅を開くために左にマージンを取っている*/
	list-style: none; /*デフォルトでついているliの黒点をnoneにしている*/
}

.dashboard {
  position: fixed;
  left: 0px;
  width:200px;
  height: 100%; /*ページいっぱい伸ばしたい*/
  padding: 0px;
  margin-top: 65px;
  border-top: 0px;
  border: 1px solid #bbd;
  background-color: #3c4a58;
}
.dashboard li{
  list-style: none;
  background: #3c4a58;
  color: white;
  border-top: 1px solid #ccc;
  padding: 10px 20px;
  text-align: center;
}

.dashboard li:first-child {
  background-color: #36c;
  color: white;
  border-radius: 5px 5px 0px 0px;
}

.dashboard p {
  text-align: center;
}

.content {
  position: fixed;
  margin: 65px 0 50px 0;
  width: 400px;
  height: 500px;
  margin: 0 auto;
  background-color: red;
}

変更点
cssコードの変更並びスクショの変更しました。
また不適切なタグをつけていたため削除しました。

Comments

[m.ts10806]

タグに「CSSフレームワーク」とありますが、これはどのように関係しているのでしょうか

[退会済みユーザー]

タグつける際に関連するものを間違えてつけていました。
そのため削除させていただきました。

[Lhankor_Mhy]

『ヘッダーと左のリスト内の白い部分』というのがよくわかりませんでした。
「売上管理」の下あたりに納める、という意味ですか？

[退会済みユーザー]

説明に語弊がありすいませんでした。
スクショ内の白い部分を指します。
ヘッダーの下の部分になります。

[Lhankor_Mhy]

補足願います。
.content の親要素は body ですか？
「白い部分」には要素が何もないのですか？

[退会済みユーザー]

content内は特にいじっていないので現在は何も入っていない状態です。
contentについては勉強がてらにスクショの白い部分に当て込みたいただけなので赤の部分が白い部分に収まめる方法を知りたく質問しました。
position:をいじったりもしたのですが出来なかったので質もさせていただきました。

[Lhankor_Mhy]

では .content の親要素は body でいいのですね？
HTML構造を変えてもいいですか？

[退会済みユーザー]

はい、contentはbodyになります。
サンプルで作っただけなので大丈夫です。

Answer 1

全部の要素にposition:fixedをつけるのとか、かなり変わったレイアウトの仕方だと思います。

サンプル

<div class="wrapper">
<ul class="dashboard">
  <li>ドロップダウン</li>
  <li>プロフィール</li>
  <li>予約チケット</li>
  <li>スケジュール</li>
  <li>売上管理</li>
</ul>
<div class="content"></div>
</div>

.dashboard {
  /* position: fixed; 削除*/
  left: 0px;
  width:200px;
  height: 100%; /*ページいっぱい伸ばしたい*/
  padding: 0px;
  margin-top: 65px;
  border-top: 0px;
  border: 1px solid #bbd;
  background-color: #3c4a58;
}

.wrapper {
  position:fixed;
  top:0;
  left:0;
  height:100%;
  display:flex;
}
.content {
  /* position: fixed; 削除*/
  margin: 100px 0 50px 0; /* 変更 */
  width: 400px;
  height: 500px;
  /* margin: 0 auto; 削除*/
  background-color: red;
}