Question

我正在研究通过 PHP 创建的模式。我遇到的问题是尺寸，特别是模态高度的尺寸。在模态内部找到的方向可能有不同的长度，所以我不能坚持像“350px”这样的静态高度，因为每组方向都是不同的字长。此外，每当用户单击“寻求帮助”按钮时，我都必须使用 Javascript 调整 div 的高度，因为此功能会向模态添加文本框。

期望的最终结果：高度设置为仅适合显示的内容的模态，没有多余的空白。我想基本上消除方向和按钮之间的所有额外空白。

我的尝试 我已将 .modal-window{height: } 属性调整为 100%、auto 和 1fr，但这些似乎都不起作用。此外，如果用户单击“寻求帮助”按钮，我不确定如何调整 .modal-window 的大小以适应添加的教科书。我的想法已经用完了，我需要做什么？

密码：https://codepen.io/dansbyt/pen/VwbYdMJ

期望结果的示例图像： picture

function askHelp(arg) {
  
  var window = document.getElementsByClassName('modal-window')[0];
  var textbox = document.getElementsByTagName("textarea")[0];
  
  var helpBtn = document.getElementById('askforhelp');
  var doneBtn = document.getElementById('markdone');
  var sendBtn = document.getElementById('sendmsg');
  var cancelBtn = document.getElementById('cancelmsg');
  
  if (arg == "showform") {
    window.style.height = '400px';
    textbox.style.display = 'block';
    helpBtn.style.display = 'none';
    doneBtn.style.display = 'none';
    sendBtn.style.display = 'block';
    cancelBtn.style.display = 'block';
  }
  
  if (arg == "hideform") {
    window.style.height = '350px';
    textbox.style.display = 'none';
    helpBtn.style.display = 'block';
    doneBtn.style.display = 'block';
    sendBtn.style.display = 'none';
    cancelBtn.style.display = 'none';
  }
}

.modal {display: block !important}

.modal {
  display: none;
  position: fixed;
  z-index: 20;
  right: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s}

/* Customized part listed below */

.modal-window{
  display: grid;
  position: fixed;
  padding: 10px;
  width: 600px; height: 350px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: height 0.5s;
  grid-template-rows: 90px 1fr 60px;
  grid-template-areas:
    "top"
    "content"
    "controls";}

/* --------[TOP] -------- */
.modal-top {
  display: grid;
  grid-area: top; 
  border-bottom: 2px solid #5B7042;
  grid-template-columns: 100px 1fr 80px;}

.pic{
  display: inline-block;
  width: 65px;
  clip-path: circle();
  margin-left: 10px;}

.modal-top .title {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 26px}

.due {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: gray;}


/* --------[CONTENT] -------- */
.modal-content {
  display: block;
  grid-area: content;
  overflow-y: scroll;
  padding: 12px;}

.directions {
  font-size: 18px;
  line-height: 1.7}

textarea {
  display: none;
  width: 100%; height: 100px;
  box-sizing: border-box;
  font-size: 18px !important;
  margin-top: 20px;}

/* --------[CONTROLS] -------- */
.modal-controls {
  display: flex;
  align-items: center;
  grid-area: controls}

#askforhelp {margin-right: 10px;}

#sendmsg {display: none; margin-right: 10px}
#cancelmsg {display: none}

<link rel="stylesheet" href="https://classcolonies.com/resources/style.css">

<div id="successModal" class="modal">
  <div class="modal-window">
    <div class='modal-top'>
      <img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
      <span class='title'> Reading Homework </span>
      <span class='due'> Due 3d </span>
    </div>
    <div class="modal-content">
      <div class='directions'>
        <b>Directions:</b> You must complete this assignment to continue to the next section.
      </div>
      <textarea placeholder='Type Question..'></textarea>
    </div>
    <div class="modal-controls">
      <button id='askforhelp' class='button green-btn' onclick='askHelp("showform")'>Ask for Help</button>
      <button id='markdone' class='button green-btn'>Mark as Done</button>
      <button id='sendmsg' class='button green-btn'>Send Message</button>
      <button id='cancelmsg' class='button grey-btn' onclick='askHelp("hideform")'>Cancel Message</button>
    </div>
  </div>
</div>

Example image of desired outcome

Answer 1

height:100vh;

或使用 calc() 计算

height:calc(100vh - 100px);

CSS 自动调整网格高度

1 个答案: