HTML / CSS Div не продолжается до конца - PullRequest
Новая
       18

HTML / CSS Div не продолжается до конца

0 голосов
/ 09 сентября 2018

Я пытаюсь сделать сайт со статической боковой панелью и прокручиваемым текстом. Я действительно не могу найти причину, по которой мой контент -дивер не продолжает весь путь вниз. Мне также интересно, лучше ли делать исправление делителя content или продолжать его в самом низу. Посмотрите, как страница не помещается в серый разделитель

Problem

Вот мой код:

HTML: 

<div id="content">
    <div id="sidebar">
        <p>This is sidebar</p>
    </div>      
    <div id="page">
        <p>This is page</p>
        ...
    </div>
</div>

CSS: 

#content {
    height: 100%;
    background-color: lightgrey;
    background-attachment: fixed;   /* THIS DOES NOT WORK */
    margin: auto;
    width: 80%;
}
#sidebar {  
    margin-top: 10%;
    text-align: right;
    position: fixed;
    bottom: 0;
    float: left;
    width: 34%;
    height: 70%;
}
#page {
    float: right;
    width: 54%;
}

P.S. Мне удалось решить эту проблему, добавив overflow: auto; к page -divider, но мне не очень нравится иметь эту полосу прокрутки на странице.

Ответы [ 2 ]

0 голосов
/ 09 сентября 2018

Я думаю, что вы должны использовать минимальную высоту вместо высоты, чтобы иметь гибкую высоту, которая соответствует содержимому следующим образом: 

#content {
min-height: 1000px;
}

Я работаю таким образом, и он работает со мной каждый раз, когда вы должны попробовать.

0 голосов
/ 09 сентября 2018

Я предполагаю, что в вашем CSS у вас также есть html,body {height:100%}, и, определяя height:100% для контента, вы ограничиваете его размер до размера браузера, поэтому фон не будет продолжаться, и у вас будет переполнение. Используйте min-height вместо высоты. Вы также используете float, поэтому вам нужно очистить его, используя overflow:auto

html,body {
  height: 100%;
}

#content {
  min-height:100%;
  overflow:auto;
  background-color: lightgrey;
  margin: auto;
  width: 80%;
}

#sidebar {
  margin-top: 10%;
  text-align: right;
  position: fixed;
  bottom: 0;
  float: left;
  width: 34%;
  height: 70%;
}

#page {
  float: right;
  width: 54%;
}
<div id="content">
  <div id="sidebar">
    <p>This is sidebar</p>
  </div>
  <div id="page">
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    <p>This is page</p>
    ...
  </div>
</div>
...