6

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


    

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

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

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

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

1
  • каркас не правильно сделан, можно изменить? или только со стилями работать? 5 июн 2017 в 7:01

2 ответа 2

3

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

Это стандартная верстка 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;
	}
	<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>

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

  2. Остальное — флексбокс.

*,
*: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;
}
<header></header>

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

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

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

3
  • Смотри на footer и sidebar не один не на месте 5 июн 2017 в 16:24
  • Хорошая ли практика применять ко всему box-sizing: border-box; ?
    – Fangog
    18 июн 2017 в 16:07
  • @Fangog если понимаешь, что делаешь, то да :-) 19 июн 2017 в 7:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.