Question

有没有办法在不使用flexbox的情况下强制max-height父素没有定义 height的元素？

我正在使用移动视图，并想在 modal-content 元素上添加一些内容（！注意，不在父 {{1}上在滚动时，当它超过屏幕高度（JsFiddle here）时：

＆＃13;

modal-dialog

＆＃13;

.modal {
  position: fixed; 
  top: 0; right: 0; 
  left: 0; bottom: 0;
  max-height: 100vh;  
  background: lightblue;
}
.modal-header {font-size: 40px;}
.modal-dialog { margin: 10px; max-height: calc(100vh - 20px); background: yellow; }
.modal-content{ margin: 10px; 
font-size: 30px; overflow: auto; border: 1px red solid; background: rgba(255, 255, 204, 0.75);}

＆＃13;

Answer 1

只需在你的模态对话框中添加overflow：auto：

＆＃13;

.modal {
  position: fixed; 
  top: 0; right: 0; 
  left: 0; bottom: 0;
  max-height: 100vh;  
  background: lightblue;
}
.modal-dialog { margin: 10px; max-height: calc(100vh - 20px); background: yellow; overflow: auto; }
.modal-content{ margin: 10px; max-height: 100%;
font-size: 40px;border: 1px red solid; background: rgba(255, 255, 204, 0.75);}

＆＃13;

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

＆＃13;

Answer 2

这里是jQuery的解决方案，它可以适应您需要的任何地方。

它只是读取屏幕高度并将相同的高度应用于模态。然后将溢出滚动添加到.modal（这可以直接在CSS上声明，而不是在jQuery上执行）。

＆＃13;

function message() {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, 1500, 'hi');
  });
}

async function go() {
  console.log('Async call started...');
  var msg = await message();
  console.log(msg);
}

go();

＆＃13;

$(document).ready(function(){
var height = $(window).height();
$('.modal').height(height);
$('.modal').css('overflow', 'scroll');

});

＆＃13;

.modal {
  position: fixed; 
  top: 0; right: 0; 
  left: 0; bottom: 0;
  max-height: 100vh;  
  background: lightblue;
}
.modal-header {font-size: 40px;}
.modal-dialog { margin: 10px; max-height: calc(100vh - 20px); background: yellow; }
.modal-content{ margin: 10px; 
font-size: 30px; overflow: auto; border: 1px red solid; background: rgba(255, 255, 204, 0.75);}

＆＃13;

蓝色标记屏幕结束的位置，然后您模拟溢出。如果您不希望显示此蓝色，则可以更改

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-header">
    Lorem ipsum dolor sit amet
    </div>
    <div class="modal-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

到

$('.modal').height(height);

它应该做的伎俩。它还用于制作屏幕高度的页面块。

在没有flexbox的父元素没有定义高度的元素上强制最大高度？

2 个答案: