Question

这是电影评论应用程序。一旦您在PC上超过了第三排，并且我相信移动设备上的第三或第四部电影列表，就会切断该评论，如下图所示。在该图像中仅按钮被切除，但是如果我添加另一行，它将被100％切除/隐藏。

我尝试将height: 100% width:100%添加到我的html和body元素中，但是当我显示电影列表时，这会添加第二个垂直滚动条吗？

我该如何解决？

这是我的HTML

<!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>

这是我的CSS

html, body {
  font-family: 'Montserrat', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: #fff;
}

* {
  box-sizing: border-box;
}

/* KEYFRAMES */

@keyframes notificationSlideDown {
    0%, 100% { transform: translateY(-50px);}
    10%, 90% { transform: translateY(0px);}
}

@-webkit-keyframes notificationSlideDown {
  0%, 100% { -webkit-transform: translateY(-50px);}
  10%, 90% { -webkit-transform: translateY(0px);}
}

@-moz-keyframes notificationSlideDown {
  0%, 100% { -moz-transform: translateY(-50px);}
  10%, 90% { -moz-transform: translateY(0px);}
}

@keyframes sectionSlideDown {
  0% { transform: translateY(-15%);}
  100%{ transform: translateY(0);}
}

@keyframes h1-SlideDown {
  0% { transform: translateY(-20%);}
  100%{ transform: translateY(0);}
}

@keyframes h5-SlideDown {
  0% {opacity: 0;}
  0% { transform: translateY(-100%)}
  100%{ transform: translateY(0);}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% { opacity: 0;}
  100% {opacity: 1;}
}


/* Notification box */

#notification {
  display: none;
  font-size: 20px;
  font-weight: bolder;
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: rgb(255, 255, 255);
  color: rgb(0, 119, 255);
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px #000;
  -mox-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

#close {
  margin: auto;
  color: #000;
  z-index: 102;
}

.notification-animation {
   animation: notificationSlideDown 1.5s ease forwards;
}


/* Header Elements */

header {
  text-align: center;
  letter-spacing: 1.5px;
  color: rgb(0, 119, 255); 
  font-weight: bold;
}

h1, h5 {
  margin-top: 5%;
  margin-bottom: 0;
}

h1 {
  font-size: 40px;
  animation: h1-SlideDown 1.2s ease;
}

h5 {
  font-size: 12px;
  padding: 0 3%;
  animation: h5-SlideDown 1.3s ease;
}

/* DIVS */

.get-movies-div {
  text-align: center;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}

.delete-and-update-btn-div {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 10px;
}

#error-div, #section-error-div {
  color: rgb(243, 86, 86);
  text-align: center;
}

#section-error-div {
  position: relative;
  top: 0;
}


/* FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
}

#get-movies-form {
  margin-top: -5%;
}



/* LABELS */

label {
  color: rgb(0, 119, 255);
  display: block;
  width: 100%;
  margin-top: 6%;
  margin-left: 15%;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
}

.search-by-title-label {
  margin-left: 15%;
}


/* INPUTS */

input, textarea {
  font-family: 'Montserrat', sans-serif;
  border-radius: 3px;
  border: 1px rgb(173, 173, 173) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
}

input:focus, textarea:focus {
  transition: .2s;
  border-color: rgb(0, 119, 255);
  outline: transparent;
}

#movie-title-to-search-input {
  width: 44%;
}



/* BUTTONS */

button {
  font-family: 'Montserrat', sans-serif;
  outline: none;
  padding: 2.2%;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: linear-gradient(90deg, rgb(0, 119, 255), rgb(0, 97, 243)); 
  border: solid 1px transparent;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

button:hover {
  cursor: pointer;
  color: rgb(180, 180, 180);
  transition: .2s;
  transform: scale(.97);
  background-color: rgb(0, 119, 255);
  outline: rgb(0, 119, 255);
}

#create-btn {
  width: 70%;
}

#get-movie-by-name-btn, #display-all-movies-btn {
  font-weight: 700;
}

#get-movie-by-name-btn {
  margin-top: 0;
  margin-left: -14%;
  width: 25%;
  padding: 2.1% 1%;
}

#display-all-movies-btn {
  margin-top: 5%;
  margin-bottom: 7%;
  width: 70%;
  display: block;
}

.delete-btn, .update-btn {
  margin: 0;
  font-weight: 400;
  padding: 1.5%;
  width: 30%;
}

.delete-btn {
  margin-right: 2%;
}


/* MOVIE LIST */

#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;
  
}

section {
  border: 1px rgb(223, 223, 223) solid;
  border-radius: 5px;
  padding: 2%;
  margin-top: 10%;
  box-shadow: 0 10px 15px #d6d6d6;
  outline: transparent;
  background: #fff;
  color: rgb(88, 88, 88);
  position: relative;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

li {
  list-style: none;
  margin: 2% 0 5% -10%;
  letter-spacing: .5px;
  font-weight: 500;
  color: rgb(0, 119, 255);
}

ul {
  padding-bottom: 5%;
  margin-bottom: 20%;
}

p {
  display: inline;
  overflow-wrap: break-word;
  letter-spacing: .5px;
}

.rating,
.runtime,
.title,
.review {
  color: rgb(65, 65, 65);
}

.id {
  display: none;
}


@media only screen and (min-width: 768px) {

  h5 {
    font-size: 15px;
    padding: 0 15%;
  }

  #error-div {
    position: relative;
    top: 40px;
  }

   label {
    margin-top: 2%;
    margin-left: 25%;
   }

   .search-by-title-label {
     margin-left: 25%;
   }

   input, textarea {
     width: 50%;
     padding: 1.5%;
   }

   #movie-title-to-search-input {
     width: 34%;
     margin-right: 0;
   }

   #create-btn, #display-all-movies-btn {
     width: 50%;
     padding: 1.2%;
   }

   #get-movie-by-name-btn {
     width: 15%;
     padding: 1.3%;
     margin: 0 25% 0 1%;
   }
   
   #movie-list {
    grid-gap: 2.5%;
   }
   
  section {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1024px) {

  h5 {
    font-size: 17px;
    padding: 0 25%;
  }

  h1 {
    margin: 1% 0 -3% 0;
    font-size: 50px;
  }

  label {
    margin-left: 32.5%;
   }

   .search-by-title-label {
     margin-left: 32.5%;
   }

   input, textarea {
     width: 35%;
     padding: 1%;
   }

   #movie-title-to-search-input {
     width: 26%;
     margin-right: 0;
   }

   #create-btn, #display-all-movies-btn {
     width: 35%;
     padding: .9%;
     margin-top: 1.5%;
   }

   #get-movie-by-name-btn {
     width: 9%;
     padding: .85%;
     height: 10%;
     margin: 0 32.4% 0 .25%;
   }
}

@media only screen and (min-width: 1440px) {
  #error-div {
    top: 70px;
  }
}

这是我的JavaScript为每个电影评论/部分生成的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);
 }
}

感谢您的帮助！

谢谢！

Answer 1

我相信要删除

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
}

将解决该问题。

当元素多于2行时，页面底部是否被截断？

1 个答案: