当您单击input字段时，我的网格布局被推高，因为几乎所有内容都在%中使用height，但是仍然可以阻止它被搞砸了。我尝试使用媒体查询来更改.grid-container grid-template-rows，唯一的问题是它需要在很多手机上进行测试以确保根据需要正确显示。
通过CSS或Jquery / JS是否有解决方案？
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
<title>Blank App</title>
<link rel="stylesheet" type="text/css" href="./CSS/all.css">
<link rel="stylesheet" type="text/css" href="./CSS/main.css">
<link rel="stylesheet" type="text/css" href="./CSS/messages.css">
<script type="text/javascript" src="./JS/jquery-3.4.1.js"></script>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
</head>
<body>
<div class="grid-container">
<div class="row">
<div class="col-12">
<div class="topnav">
<a href="myShifts.html"><i class="fas fa-clock fa-3x fa-fw"></i></a>
<a href="timesheets.html"><i class="fas fa-edit fa-3x fa-fw"></i></a>
<a href="availability.html"><i class="fas fa-calendar-alt fa-3x fa-fw"></i></a>
<a href="messages.html"><i class="fas fa-comments fa-3x fa-fw"></i></a>
<a href="accounts.html"><i class="fas fa-cog fa-3x fa-fw"></i></a>
<i class="fas fa-bars fa-3x fa-fw icon-float-right" id="sidenav-icon"></i>
<div class="sidenav">
<a class="closebtn">×</a>
<a href="myShifts.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-clock fa-lg"></i></div>
<div class="item text">Shifts</div>
</div>
</a>
<a href="timesheets.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-edit fa-lg"></i></div>
<div class="item text">Timesheets</div>
</div>
</a>
<a href="availability.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-calendar-alt fa-lg"></i></div>
<div class="item text">Availability</div>
</div>
</a>
<a href="messages.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-comments fa-lg"></i></div>
<div class="item text">Messages</div>
</div>
</a>
<a href="messages.html">
<div class="flex-container">
<div class="item img"><i class="fas fa-cog fa-lg"></i></div>
<div class="item text">Settings</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="border-header">
<h3>NAME</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="msg-page">
<div class="messages" id="msg-list">
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">13:24 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg HereText Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="sent">
<div class="msg-header">
<span class="time">13:29 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">14:12 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">16:39 | September 14</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">13:24 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg Here Text Msg Here Text Msg Here Text Msg Here Text Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="sent">
<div class="msg-header">
<span class="time">13:29 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg HereText Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">14:12 | September 12</span>
</div>
<div class="msg-body">
<p>Text Msg Here</p>
</div>
</div>
</div>
<div class="msg">
<div class="received">
<div class="msg-header">
<span class="time">16:39 | September 14</span>
</div>
<div class="msg-body">
<p>Text Msg HereText Msg Here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="footer">
<textarea id="txtmsg-body" rows="3" placeholder="Enter message here.."></textarea>
<button id="msg-send">
<i class="fas fa-paper-plane fa-2x fa-fw"></i>
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./JS/main.js"></script>
<script type="text/javascript" src="./JS/messages.js"></script>
</body>
</html>
CSS Main：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: default;
outline: none;
/*
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
*/
-webkit-tap-highlight-color: transparent;
}
html, body {
overflow: hidden;
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: white;
font-family: "Lucida Sans", sans-serif;
}
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
[class*="col-"] {
float: left;
height: 100%;
/*padding: 15px;*/
}
.grid-container > .row:after {
content: "";
clear: both;
display: table;
}
/* Using the new nav bar with icons instead of text */
.topnav {
display: flex;
justify-content: space-around;
align-content: center;
align-items: center;
background-color: #0984e3;
height: 100%;
/* font-size: 0.9em;*/
}
.topnav > a, .topnav > i {
color: white;
}
.topnav .sidenav {
height: 100%;
width: 0%;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: #0984e3;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.topnav .sidenav.open {
border-right: 1px solid black;
}
.sidenav .flex-container {
display: flex;
align-content: flex-start;
padding: 0px;
margin: 0px;
}
.sidenav > a {
text-decoration: none;
}
.sidenav .flex-container .item {
color: white;
font-size: 1.2em;
padding: 5px 0px 5px 15px;
}
.sidenav .flex-container .item.img {
width: 20%;
}
.sidenav .flex-container .item.text {
width: 80%;
}
.topnav .sidenav .closebtn {
cursor: pointer;
position: absolute;
top: 0px;
right: 10px;
font-size: 25px;
color: white;
}
.header {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
position: relative;
text-align: center;
}
.border-header {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
box-shadow: 0px 2px 5px 0.25px grey;
z-index: 2;
position: relative;
}
h3 {
text-align: center;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
CSS消息：
.grid-container {
display: grid;
/* Might have to change this based on the current page as each page will have different row values */
grid-template-rows: 8% 10% 75% 7%;
/* grid-template-rows: 100%;*/
height: 100%;
}
/*
@media screen and (max-height: 600px) {
.grid-container {
grid-template-rows: 12.25% 17.75% 57.75% 12.25%;
}
}
@media screen and (max-height: 400px) {
.grid-container {
grid-template-rows: 21% 20% auto 21%;
}
}
*/
.message-container {
display: block;
height: 100%;
}
.message-container::after {
content: '';
clear: both;
display: table;
}
/*
.header {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
box-shadow: 0px 2px 5px 0.25px grey;
z-index: 2;
position: relative;
}
*/
.msg-page {
max-width: 100%;
height: 100%;
z-index: 1;
}
.messages {
width: 100%;
height: 100%;
z-index: 1;
overflow-y: scroll;
}
.msg {
padding: 10px 15px 10px 15px;
color: white;
}
.msg::after {
content: ' ';
display: block;
height: 0;
clear: both;
}
.msg .received {
background-color: #00b894;
}
.msg .sent {
background-color: #0984e3;
float: right;
}
.msg > div:first-child {
padding: 10px;
border-radius: 5px;
width: 90%;
}
.msg .msg-body p {
padding: 0px;
margin: 0px;
}
.chats {
padding: 5px 25px 5px 20px;
width: 50%;
display: block;
}
.received-msg {
background-color: lightgray;
}
.sent-msg {
background-color: lightblue;
right: 0px;
}
.footer {
display: flex;
box-shadow: 0px -2px 5px 0.25px grey;
height: 100%;
}
.footer input[type=text] {
width: 85%;
min-height: 100%;
height: 100%;
border: none;
padding: 0px 0px 0px 15px;
font-size: 25px;
}
.footer input[type=text]:focus {
min-height: 100%;
height: 100%;
/* TODO: OUTLINE REMOVAL FROM MOST ELEMENTS ???? */
outline: none;
}
.footer textarea {
resize: none;
border: none;
width: 85%;
height: 100%;
font-size: 5vw;
padding: 15px 0px 0px 15px;
justify-content: center;
}
.footer button{
width: 15%;
min-height: 100%;
height: 100%;
border: none;
background-color: white;
}