0

Добрый день, столкнулся с такой проблемой, хочу сделать на странице слева колонку навигации, она должна быть в ширину 96px, а в высоту на всю страницу, проблемы начались на установке высоты для этой колонки (правее неё идет контент страницы). Вот исходник html:

body,
html {
  background-color: #2a2c3b;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.header {
  color: #fff;
  height: 96px;
  background-color: #2f3242;
  box-shadow: 0px 3px 80px 0px rgba(23, 24, 32, 0.2);
}

.main-nav {
  width: 96px;
  float: left;
  background-color: #2f3242;
  box-shadow: 0px 3px 80px 0px rgba(23, 24, 32, 0.2);
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <div class="container-fluid">
    <header class="header row"></header>
  </div>
  <div class="main-nav"></div>
</body>

Если убрать у body свойство overflow: hidden , то div с навигацией будет выползать за body и появится вертикальная полоса прокрутки. Как этого избежать не прибегая к overflow: hidden. Или то как я сделал это вполне нормальная практика?

3
  • body overflow, однако 25 июл 2017 в 18:29
  • @KAGGDesign, это зашквар?) так не делают? Стоп, сейчас кажется только дошло, у меня теперь вообще страница не будет по вертикали расширяться? Боже... :D Вот это я дятел) Как сделать правильно? 25 июл 2017 в 18:37
  • Это шутка, параллель со Stack Overflow ) 25 июл 2017 в 18:49

1 ответ 1

1

Делают так:

body {
  margin: 0;
}

.main-nav {
  position: fixed;
  width: 96px;
  left: 0;
  top: 0;
  height: 100%;
  background: #2f3242;
  box-shadow: 0px 3px 80px 0px rgba(23, 24, 32, 0.2);
}

#content {
  padding-left: 60px;
  width: calc(100% - 60px);
  max-width: calc(100% - 60px);
  height: 300px;
  /* для примера */
  background: yellow;
  /* для примера */
}
<body>
  <div class="main-nav"></div>
  <div id="content"></div>
</body>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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