css - CSS 自动调整网格高度
问题描述
我正在研究通过 PHP 创建的模式。我遇到的问题是尺寸,特别是模态高度的尺寸。在模态中找到的方向可能有不同的长度,所以我不能坚持使用像“350px”这样的静态高度,因为每组方向都是不同的字长。此外,每当用户单击“请求帮助”按钮时,我都必须使用 Javascript 调整 div 的高度,因为此功能会在模式中添加一个文本框。
期望的最终结果:高度设置为仅适合显示的内容的模式,没有额外的空白。我想基本上消除方向和按钮之间的所有额外空白。
我已经尝试过将属性调整.modal-window{height: }
为 100%、自动和 1fr,但这些似乎都不起作用。.modal-window
此外,如果用户单击“寻求帮助”按钮,我不确定如何调整添加的教科书的大小。我的想法已经用完了,我需要做什么?
密码: https ://codepen.io/dansbyt/pen/VwbYdMJ
期望结果的示例图像: 图片
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>
解决方案
height:100vh;
或使用 calc() 计算
height:calc(100vh - 100px);
推荐阅读
- python-requests - 将 verify=False 传递给 post 时出现 ValueError 异常
- mysql - 如何将查询中的常量值列添加到另一个查询结果中?
- javascript - 从本地存储中获取星级和数据
- python - Python程序在运行时无法识别全局变量
- amazon-cloudwatch - 如何在 AWS Cloud Watch Logs Insights 中运行分组
- winapi - 更改按钮的关键事件行为
- python - 在 Anaconda 上安装 Python 包 mca
- javascript - 如何在three.js中使用Matrix4来解决我的旋转加速问题
- react-admin - 如何将自定义主题应用于 React Admin 中的自定义路由?
- kotlin - @SerialInfo - 如何使用 Kotlinx 序列化管理用户定义的串行注释?