div блок с прокруткой

403

19 сентября 2017, 06:02

Футер и хедер должны быть всегда статичны, а высота дивов регулироваться автоматически, в зависимости от высоты окна. Как можно решить эту проблему?

.wrapper { 
    overflow: scroll; 
    height: 100%; 
    overflow-x: hidden; 
     
} 
 
.main { 
    display: flex; 
    height: 100%; 
    margin: 0% 10%; 
} 
 
html { 
    height: 100%; 
} 
 
body { 
    height: 100%; 
    margin: 0px; 
} 
 
header { 
    background-color: gray; 
} 
 
footer { 
    background-color: gray; 
    height: 12px; 
} 
 
li { 
    padding: 20px; 
}

<body> 
    <div class="main"> 
        <div class="container"> 
            <header> Text 
                <div> 1 </div> 
            </header> 
            <div class="wrapper"> 
                <ul> 
 
                    <li> 
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
                    </li> 
 
                    <li> 
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
                    </li> 
                    <li> 
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
 
 
                    </li> 
 
 
                </ul> 
            </div> 
            <footer> </footer> 
        </div> 
        <div class="container"> 
            <header> Text</header> 
            <div class="wrapper"> 
                <ul> 
 
                    <li> 
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
                    </li> 
 
                    <li> 
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
                    </li> 
 
                    <li> 
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
                    </li> 
 
                </ul> 
            </div> 
            <footer> 
            </footer> 
        </div> 
 
    </div> 
 
</body>

Answer 1

Например, так:

.wrapper { 
  overflow: scroll; 
  height: 100%; 
  overflow-x: hidden; 
  flex: 1 0; 
} 
 
.main { 
  display: flex; 
  height: 100%; 
  margin: 0% 10%; 
} 
 
html { 
  height: 100%; 
} 
 
body { 
  height: 100%; 
  margin: 0px; 
} 
 
header { 
  background-color: gray; 
} 
 
footer { 
  background-color: gray; 
  height: 12px; 
} 
 
li { 
  padding: 20px; 
} 
 
.container { 
  display: flex; 
  flex-direction: column; 
}

<div class="main"> 
  <div class="container"> 
    <header> Text 
      <div> 1 </div> 
    </header> 
    <div class="wrapper"> 
      <ul> 
        <li> 
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
        </li> 
        <li> 
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
        </li> 
        <li> 
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
        </li> 
      </ul> 
    </div> 
    <footer> </footer> 
  </div> 
  <div class="container"> 
    <header> Text</header> 
    <div class="wrapper"> 
      <ul> 
        <li> 
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
        </li> 
        <li> 
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
        </li> 
        <li> 
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
        </li> 
      </ul> 
    </div> 
    <footer> 
    </footer> 
  </div> 
 
</div>

Answer 2

html, 
body { 
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
} 
 
.wrapper { 
  height: 100%; 
  overflow: auto; 
} 
 
.main { 
  display: flex; 
  height: 100%; 
  margin: 0% 10%; 
} 
 
html { 
  height: 100%; 
} 
 
body { 
  height: 100%; 
  margin: 0px; 
} 
 
header { 
  background-color: gray; 
} 
 
footer { 
  background-color: gray; 
  height: 12px; 
} 
 
li { 
  padding: 20px; 
}

<body> 
  <div class="main"> 
    <div class="container"> 
      <header> Text 
        <div> 1 </div> 
      </header> 
      <div class="wrapper"> 
        <ul> 
 
          <li> 
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
          </li> 
 
          <li> 
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
          </li> 
          <li> 
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
 
 
          </li> 
 
 
        </ul> 
      </div> 
      <footer> </footer> 
    </div> 
    <div class="container"> 
      <header> Text</header> 
      <div class="wrapper"> 
        <ul> 
 
          <li> 
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
          </li> 
 
          <li> 
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
          </li> 
 
          <li> 
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. 
 
          </li> 
 
        </ul> 
      </div> 
      <footer> 
      </footer> 
    </div> 
 
  </div> 
 
</body>