Верстка каркаса html шаблона

#html #css #вёрстка

Такая проблема, есть макет 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;
}




  

    Блоки, должны быть всегда на виду
  

  

    Футер
всегда внизу
  




  Контент, должен быть прижат к низу
  


























































    




Надо прижать .content к низу и сделать так, чтобы меню всегда оставалось на виду
(перемещалось вместе с прокруткой)

Сейчас у меня такие проблемы:

1) Черная полоска справа от aside идет не до конца страницы, и фон aside тоже

2) .blocks должен прокручиваться вместе со страницей и не залезать на footer
    

Ответы

Ответ 1

Сайдбар клеится внутрь блока при помощи position: sticky, для кроссбраузерности не
забудьте использовать полифилл.
Остальное — флексбокс.




*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  background-color: #FBD293;
  border-bottom: 1px solid #000;
  height: 50px;
  width: 600px;
}

.middle {
  border-right: 1px solid #000;
  margin: 0 auto;
  width: 600px;
  background-color: #fff;
  display: flex;
  flex-grow: 1;
}

.left-sidebar {
  position: relative;
  background-color: #CBE6A3;
  border-right: 1px solid #000;
  display: flex;
  flex-direction: column;
  flex-basis: 100px;
}

.left-sidebar__blocks-holder {
  position: relative;
  flex-grow: 1;
}

.blocks {
  background: #e6a3a3;
  height: 400px;
  position: sticky;
  top: 0;
}

.content {
  background: #A3CCFF;
  min-height: 800px;
  flex-grow: 1;
}

.left-sidebar footer {
  height: 100px;
  background: #D6A3E6;
}



  

    

      

        Блоки, должны быть всегда на виду
      
    

    

      Футер
всегда внизу
    
  

  

    Контент, должен быть прижат к низу
  



Ответ 2

Вот пример по тем критериям которые вы сказали что хотите поправить:

Это стандартная верстка CSS не знаю что объяснить, если будут вопросы скажите.

Вот код:



	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;
	}
	

	

	  

		

		  Блоки, должны быть всегда на виду
		
	  
	  

		

		  Контент, должен быть прижат к низу
		
	  
	
	

	  Футер
всегда внизу