0

jsfiddle

* {
  box-sizing: border-box;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  overflow-y: auto;
}

.modal {
  margin: 30px auto;
  position: relative;
  max-height: 100%;
  background-color: #ccc;
}

.modal-content {
  position: relative;
  max-height: 100%;
}

.modal-header {
  position: absolute;
  height: 65px;
  background-color: red;
  top: 0;
  left: 0;
  right: 0;
}

.modal-body {
  max-height: 100%;
  background-color: green;
  padding: 80px 15px 80px 15px;
  overflow-y: scroll;
}

.modal-footer {
  position: absolute;
  height: 65px;
  background-color: red;
  bottom: 0;
  left: 0;
  right: 0;
}
<div class="modal-wrapper">
  <div class="modal">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi delectus deleniti eaque error esse illo inventore iusto maxime minus odit optio saepe, tenetur ullam vitae. A cupiditate impedit modi mollitia. Ab, beatae deleniti dolorum est
        fugiat fugit ipsa necessitatibus non, numquam perferendis porro provident quod repellat saepe, sint ut voluptas? Accusantium animi aperiam consequuntur debitis dignissimos ducimus eaque earum, eius ex illum in ipsum itaque laborum magni minus
        natus nihil non obcaecati odit optio, porro possimus quidem quo recusandae repellat saepe sequi temporibus tenetur velit veniam. Beatae dolorem eligendi esse magnam minima reiciendis sapiente, soluta. Commodi earum, exercitationem fugiat laudantium
        quia ratione sint totam vel veniam vitae. Assumenda commodi cupiditate eum, iure iusto labore laborum quo quos reiciendis veniam. Ab atque consequatur cumque ducimus explicabo ipsam necessitatibus nulla quidem? Accusantium adipisci atque autem
        cumque deleniti dolorem dolores ea earum eos est et illum in iure iusto, molestiae nesciunt nulla omnis, pariatur placeat quas quasi quos ratione recusandae sequi sit tempore totam vel vitae voluptate voluptatibus! Ad aliquam esse harum illo,
        laborum quam quia sunt. Aperiam culpa delectus quasi quidem reprehenderit repudiandae voluptates voluptatibus. Ab ad, asperiores aspernatur at atque dolores ducimus expedita ipsum labore laboriosam magni maiores nostrum numquam ratione rem, reprehenderit
        suscipit tenetur ullam, veritatis voluptates. At consequatur dolore esse molestiae, neque odit placeat! Accusantium adipisci alias, architecto aspernatur beatae consectetur corporis deserunt ea fugiat impedit ipsa iste iure labore libero molestias
        nulla odio officiis perferendis perspiciatis provident quas quibusdam reiciendis sapiente sit ullam vel, velit, voluptatem. A animi consequuntur culpa, cumque cupiditate debitis delectus deleniti iure laborum non obcaecati praesentium reprehenderit
        sapiente similique voluptatum. Alias animi architecto, asperiores aspernatur autem delectus dolore dolores, eaque eligendi enim est eveniet facere, inventore itaque minus modi placeat porro quas quia quisquam sapiente temporibus totam. Amet assumenda
        aut blanditiis commodi culpa dolore est eum ex harum, hic id laborum libero minus neque optio praesentium provident quasi sapiente voluptate voluptatem. Deserunt, illo impedit modi nihil nulla perspiciatis quaerat quidem quisquam reiciendis tenetur
        veritatis vitae. Atque, ducimus, quidem. Atque debitis delectus dicta dolor dolore dolorum eius error excepturi facere harum in, ipsum natus necessitatibus nesciunt numquam odit optio pariatur reprehenderit voluptas voluptate. Ad dolore dolorum
        in iste pariatur quos voluptas? Adipisci aliquid aspernatur doloribus ea eligendi enim error fugit iste laboriosam maiores, natus nesciunt odit perspiciatis reprehenderit soluta tempore vel. A ad aliquam aliquid doloremque dolorum ipsam maiores
        nihil nulla! Aperiam asperiores cum debitis dicta ducimus ea eaque earum eligendi, exercitationem ipsum iste, nemo, neque nihil officia optio praesentium provident quae quasi quisquam reprehenderit rerum saepe totam ut veniam voluptate. Accusantium,
        consectetur cum dicta dolores ea et harum illo inventore ipsam nostrum quis quisquam sit velit veritatis voluptatem. A ad aliquid consequatur consequuntur culpa delectus dignissimos dolorem eveniet facere harum illum ipsa molestiae molestias,
        quas saepe sint voluptas voluptatum? Adipisci architecto autem consequatur deserunt, dolorum eos ipsam laboriosam necessitatibus nemo nihil nisi, odio officiis pariatur quae ratione, vitae voluptatibus! Corporis ea totam veniam! Autem beatae ducimus
        ex exercitationem, fugiat fugit quod reiciendis sapiente.
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

Суть в чем - есть модальное окно, модальное окно может быть не более 100% по высоте. В модальном окне есть фиксированная по высоте шапка и футер. Контент по высоте динамичный, в случае переполнения по высоте - появляется скролл. В чем нынешняя проблема - блок с классом modal-content по высоте больше 100% от modal, хотя указано свойство max-height: 100%. С чем это может быть связано и как решить проблему?

2

3 ответа 3

1

* {
    box-sizing: border-box;
}
.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    overflow-y: auto;
} 
.modal {
    margin: 30px auto;
/*    position: relative; */
    max-height: calc(100vh - 60px);
    background-color: #ccc;
}
.modal-content{
/*    position: relative; */
    max-height: 100%;
}
.modal-header{
/*    position: absolute; */
    height: 65px;
    background-color: red;
/*    top: 0;
    left: 0;
    right: 0; */
}
.modal-body{
    max-height: calc(100vh - 130px - 60px);
    background-color: green;
    padding: 0 15px 0 15px;
    overflow-y: auto;
}
.modal-footer{
/*    position: absolute; */
    height: 65px;
    background-color: red;
/*    bottom: 0;
    left: 0;
    right: 0; */
}
<div class="modal-wrapper">
    <div class="modal">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi delectus deleniti eaque error esse illo inventore iusto maxime minus odit optio saepe, tenetur ullam vitae. A cupiditate impedit modi mollitia. Ab, beatae deleniti dolorum est fugiat fugit ipsa necessitatibus non, numquam perferendis porro provident quod repellat saepe, sint ut voluptas? Accusantium animi aperiam consequuntur debitis dignissimos ducimus eaque earum, eius ex illum in ipsum itaque laborum magni minus natus nihil non obcaecati odit optio, porro possimus quidem quo recusandae repellat saepe sequi temporibus tenetur velit veniam. Beatae dolorem eligendi esse magnam minima reiciendis sapiente, soluta. Commodi earum, exercitationem fugiat laudantium quia ratione sint totam vel veniam vitae. Assumenda commodi cupiditate eum, iure iusto labore laborum quo quos reiciendis veniam. Ab atque consequatur cumque ducimus explicabo ipsam necessitatibus nulla quidem? Accusantium adipisci atque autem cumque deleniti dolorem dolores ea earum eos est et illum in iure iusto, molestiae nesciunt nulla omnis, pariatur placeat quas quasi quos ratione recusandae sequi sit tempore totam vel vitae voluptate voluptatibus! Ad aliquam esse harum illo, laborum quam quia sunt. Aperiam culpa delectus quasi quidem reprehenderit repudiandae voluptates voluptatibus. Ab ad, asperiores aspernatur at atque dolores ducimus expedita ipsum labore laboriosam magni maiores nostrum numquam ratione rem, reprehenderit suscipit tenetur ullam, veritatis voluptates. At consequatur dolore esse molestiae, neque odit placeat! Accusantium adipisci alias, architecto aspernatur beatae consectetur corporis deserunt ea fugiat impedit ipsa iste iure labore libero molestias nulla odio officiis perferendis perspiciatis provident quas quibusdam reiciendis sapiente sit ullam vel, velit, voluptatem. A animi consequuntur culpa, cumque cupiditate debitis delectus deleniti iure laborum non obcaecati praesentium reprehenderit sapiente similique voluptatum. Alias animi architecto, asperiores aspernatur autem delectus dolore dolores, eaque eligendi enim est eveniet facere, inventore itaque minus modi placeat porro quas quia quisquam sapiente temporibus totam. Amet assumenda aut blanditiis commodi culpa dolore est eum ex harum, hic id laborum libero minus neque optio praesentium provident quasi sapiente voluptate voluptatem. Deserunt, illo impedit modi nihil nulla perspiciatis quaerat quidem quisquam reiciendis tenetur veritatis vitae. Atque, ducimus, quidem. Atque debitis delectus dicta dolor dolore dolorum eius error excepturi facere harum in, ipsum natus necessitatibus nesciunt numquam odit optio pariatur reprehenderit voluptas voluptate. Ad dolore dolorum in iste pariatur quos voluptas? Adipisci aliquid aspernatur doloribus ea eligendi enim error fugit iste laboriosam maiores, natus nesciunt odit perspiciatis reprehenderit soluta tempore vel. A ad aliquam aliquid doloremque dolorum ipsam maiores nihil nulla! Aperiam asperiores cum debitis dicta ducimus ea eaque earum eligendi, exercitationem ipsum iste, nemo, neque nihil officia optio praesentium provident quae quasi quisquam reprehenderit rerum saepe totam ut veniam voluptate. Accusantium, consectetur cum dicta dolores ea et harum illo inventore ipsam nostrum quis quisquam sit velit veritatis voluptatem. A ad aliquid consequatur consequuntur culpa delectus dignissimos dolorem eveniet facere harum illum ipsa molestiae molestias, quas saepe sint voluptas voluptatum? Adipisci architecto autem consequatur deserunt, dolorum eos ipsam laboriosam necessitatibus nemo nihil nisi, odio officiis pariatur quae ratione, vitae voluptatibus! Corporis ea totam veniam! Autem beatae ducimus ex exercitationem, fugiat fugit quod reiciendis sapiente.
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

Пример на фидле http://jsfiddle.net/o62awmh9/ а то тут высота окна слишком маленькая.

1
  • Превосходно работает, но хотелось бы без calc() =)
    – E.Petrov
    26 окт 2015 в 15:10
0

Задайте максимальную высоту контента в пикселях

.modal-body{
    background-color: green;
    padding: 80px 15px 80px 15px;
    overflow-y: scroll;
    max-height: 500px;
}
2
  • Фиксированная высота не подходит
    – E.Petrov
    26 окт 2015 в 14:59
  • @E.Petrov ну как я понял высота в % тоже не особо подходит ;)
    – Dmitry
    26 окт 2015 в 15:01
-1
* {
  box-sizing: border-box;
}
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  overflow-y: auto;
} 
.modal {
  margin: 30px auto;
  position: relative;
  max-height: 100%;
  background-color: #ccc;
  height: 100%;
}
  .modal-content{
  height: 100%;
  display: flex;
  flex-direction: column;
}
  .modal-header{
  height: 65px;
  background-color: red;
}
  .modal-body{
  flex:1;
  background-color: green;
  padding: 80px 15px 80px 15px;
  overflow-y: scroll;
}
.modal-footer{
  height: 65px;
  background-color: red;
}
1
  • Минусивший может прокомментировать, что не так? 23 мар 2018 в 10:04

Ваш ответ

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

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