Layout of the html template frame

Question:

Such a problem, there is a layout https://jsfiddle.net/61htzzrx/

header {
  background-color: #FBD293;
  border-bottom: 1px solid #000;
  height: 50px;
}
.middle {
  border-right: 1px solid #000;
  margin: 0 auto;
  min-height: calc(100% - 50px);
  overflow: hidden;
  position: relative;
  width: 600px;
  background-color: #fff;
}
.middle > .left-sidebar {
  background-color: #CBE6A3;
  border-right: 1px solid #000;
  box-sizing: border-box;
  display: block;
  float: left;
  min-height: calc(100vh - 50px);
  padding-bottom: 160px;
  width: 100px;
}
.left-sidebar > .blocks {
  background: #e6a3a3;
  height: 400px;
}
.middle > .content {
  background: #A3CCFF;
  display: block;
  float: left;
  min-height: calc(100vh - 50px);
  width: 500px;
}
.left-sidebar footer {
  height: 100px;
  bottom: 0;
  position: absolute;
  background: #D6A3E6;
}
<header></header>
<div class="middle">

<aside class="left-sidebar">
  <div class="blocks">
    Блоки, должны быть всегда на виду
  </div>

  <footer>
    Футер<br>всегда внизу
  </footer>
</aside>


<main class="content">
  Контент, должен быть прижат к низу
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
</div>

We need to press .content to the bottom and make sure that the menu always remains visible (moves along with scrolling)

Now I have these problems:

1) The black bar to the right of the aside does not go to the end of the page, and the background of the aside too

2) .blocks should scroll along with the page and not climb onto the footer

Answer:

Here is an example according to the criteria that you said you want to fix:

This is a standard CSS layout, I don’t know what to explain, if you have questions, tell me.

Here is the code:

	body{
	  margin: 0;
	}
	header {
		background-color: #FBD293;
		border-bottom: 1px solid #000;
		height: 50px;
	}

	.middle {
		border-right: 1px solid #000;
		margin: 0 auto;
		min-height: calc(100% - 50px);
		overflow: hidden;
		position: relative;
		width: 600px;
		background-color: #fff;
	}

	.middle > .left-sidebar {
		position: fixed;
		top: 0;
		z-index: 1000;
		background-co
		background-color: #CBE6A3;
		border-right: 1px solid #000;
		box-sizing: border-box;
		display: block;
		width: 100px;
		height: 100%;
	}

	.left-sidebar > .blocks {
		background: #e6a3a3;
		height: 100%;
	}

	.middle > .content {
		position: relative;
		background: #A3CCFF;
		display: block;
		float: left;
		min-height: calc(100vh - 50px);
		width: 500px;
		padding-left: 100px;
		padding-bottom: 50px;
	}
	.content_footer{
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 50px;
	  background: yellow;
	}
	body>footer {
		height: 100px;
		background: #D6A3E6;
	}
	<header></header>
	<div class="middle">
	  <aside class="left-sidebar">
		<div class="blocks">
		  Блоки, должны быть всегда на виду
		</div>
	  </aside>
	  <main class="content">
		<div class="content_footer">
		  Контент, должен быть прижат к низу
		</div>
	  </main>
	</div>
	<footer>
	  Футер<br>всегда внизу
	</footer>
Post Views: 2
Scroll to Top