Javascript 当有2行以上的元素时，页面底部是否被切断？
这是一个电影评论应用程序。一旦你通过了PC上的第三排，我相信手机上的第三或第四部电影列表，它就会切断评论，如下图所示。在该图像中，只有按钮被切断，但如果我添加另一行，它将100%被切断/隐藏 我尝试将Javascript 当有2行以上的元素时，页面底部是否被切断？,javascript,html,css,Javascript,Html,Css,这是一个电影评论应用程序。一旦你通过了PC上的第三排，我相信手机上的第三或第四部电影列表，它就会切断评论，如下图所示。在该图像中，只有按钮被切断，但如果我添加另一行，它将100%被切断/隐藏 我尝试将高度：100%宽度：100%添加到我的html和body元素中，但是当我显示电影列表时，会添加第二个垂直滚动条吗 我怎样才能解决这个问题 这是我的HTML <!DOCTYPE html> <html lang="en"> <head>
高度：100%宽度：100%<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/2a0c07254d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="icon" href="./public/favicon.ico">
<title>Reviewer</title>
</head>
<body>
<div id="notification">
</div>
<header>
<h1>Reviewer</h1>
<h5>Create a movie review below or search for movie reviews by the movie title!</h5>
</header>
<div id="error-div"></div>
<form autocomplete="on" class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" alt="Movie title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime (in minutes, numbers only):</label>
<input type="text" name="runtime" alt="Movie Runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating (Between 1 and 10, numbers only):</label>
<input type="text" name="rating" alt="Movie Rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<textarea name="review" alt="Movie Review" id="review" rows="4" cols="50" placeholder="Movie review"></textarea>
<button type="submit" id="create-btn">Create movie review</button>
</form>
<form autocomplete="on" id="get-movies-form" action="submit">
<label class='search-by-title-label' for="search-for-movie-input">Search by movie title:</label>
<div class="get-movies-div">
<input type='search' name="search-for-movie-input" alt="Search input" id='movie-title-to-search-input' placeholder="Search" />
<button id="get-movie-by-name-btn">Search</button>
</div>
</form>
<button id='display-all-movies-btn'>Display All Listings</button>
<div id='movie-list'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="./js/functions.js"></script>
<script src="./js/movies.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
// Generate HTML for section elements holding movie data.
function generateHTML(res) {
const movie = res.data;
for (let i = 0; i<movie.length; i++) {
const sections = document.createElement('section');
sections.innerHTML = `
<div class='id'>${movie[i].id}</div>
<div id="section-error-div"></div>
<ul>
<li> Title: <p class='title'>${movie[i].title}</p> </li>
<li> Runtime: <p class='runtime'>${movie[i].runtime}</p> minutes</li>
<li> Rating: <p class='rating'>${movie[i].rating}</p>/10 </li>
<li> Review: <p class='review'>${movie[i].review}</p> </li>
</ul>
<div class="delete-and-update-btn-div">
<button class="delete-btn">Delete</button>
<button class="update-btn">Update</button>
</div>
`
movieListDiv.appendChild(sections);
}
}
//为保存电影数据的节元素生成HTML。
函数生成器HTML（res）{
const movie=分辨率数据；
对于（设i=0；i我相信
overflow: hidden;
从
#电影列表{
显示：网格；
网格模板列：重复（自动填充，最小值（300px，1fr））；
网格模板行：1fr；
网格自动流：行；
柱间距：1fr；
行间距：1fr；
利润底部：5%；
溢出：隐藏；如果height
不起作用，那么minheight
可能会有用。是的！这似乎很管用！我甚至不记得添加了这个，哈哈。谢谢你的帮助！！
overflow: hidden;
#movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: 1fr;
grid-auto-flow: row;
column-gap: 1fr;
row-gap: 1fr;
margin-bottom: 5%;
overflow: hidden; <--- remove that
}