Не работает свойство max-height относительно родителя

E.Petrov

http://jsfiddle.net/65az3h6w/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;
}
.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-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi delectus deleniti eaque error esse illo inventore iusto maxime minus odit optio *****, tenetur ullam vitae. A cupiditate impedit modi mollitia. Ab, beatae deleniti dolorum est fugiat fugit ipsa necessitatibus non, numquam perferendis porro provident quod repellat *****, sint ut voluptas? Accusantium animi aperiam ************ 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 ***** 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 ********* reiciendis sapiente sit ullam vel, velit, voluptatem. A animi ************ 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 ***** 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 ************ culpa delectus dignissimos dolorem eveniet facere harum illum ipsa molestiae molestias, quas ***** 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>
    </div>
</div>

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

3 ответа

E.Petrov

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

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


E.Petrov

* {
    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-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi delectus deleniti eaque error esse illo inventore iusto maxime minus odit optio *****, tenetur ullam vitae. A cupiditate impedit modi mollitia. Ab, beatae deleniti dolorum est fugiat fugit ipsa necessitatibus non, numquam perferendis porro provident quod repellat *****, sint ut voluptas? Accusantium animi aperiam ************ 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 ***** 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 ********* reiciendis sapiente sit ullam vel, velit, voluptatem. A animi ************ 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 ***** 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 ************ culpa delectus dignissimos dolorem eveniet facere harum illum ipsa molestiae molestias, quas ***** 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>
    </div>
</div>

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


E.Petrov

* {
  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;
}

licensed under cc by-sa 3.0 with attribution.