将文本附加到 Div 扩展 Div 超出初始 CSS 网格

Question

我创建了一个基本的 CSS 网格，并将所有内容都放置在我想要的位置。当我运行我的 JS（将来自 API 调用的信息附加到 div 时），div 的尺寸超出了视口的边界。有没有办法防止整个 body 元素发生变化，只让 div 动态增加高度？

图片：https://imgur.com/a/wJAcW

我尝试了很多不同的东西，但似乎无法弄明白。我的后备方案是只覆盖 div 而不是附加到它。代码如下。

//Set initial latitute and longitude variables, to be used later
var lat = 0;
var long = 0;

//Google Geocode API to find the latitude and longitude of the txtAddress
$("#submit").on("click", function() {
  var userInput = $("#txtAddress").val();
  //trim the user input to the form needed for the api
  var userSearchTerm = userInput.split(' ').join('+');

  //call the google geocode api
  var queryURLGeocode = "https://maps.googleapis.com/maps/api/geocode/json?address=" + userSearchTerm + "&key=AIzaSyCSAYHZn9fz13c3bsl_RcS13HJu8wDJXCU"
  $.ajax({
      url: queryURLGeocode,
      method: "GET"
    })
    .done(function(response) {
      //Set latitude and longitude from the returned object
      lat = response.results[0].geometry.location.lat;
      //limit decimal points to 4 (xx.xxxx) - form needed for hiking api
      lat = lat.toFixed(4);

      long = response.results[0].geometry.location.lng;
      long = long.toFixed(4);

      //Call the hiking project api
      var queryURL = "https://www.hikingproject.com/data/get-trails?lat=" + lat + "&lon=" + long + "&maxDistance=10&key=200206461-4fa8ac1aa85295888ce833cca1b5929f"

      $.ajax({
          url: queryURL,
          method: "GET"
        })
        .done(function(response) {
          // loop through the response trails and add info to the site
          for (i = 0; i < response.trails.length; i++) {
            var contentDivTitle = $("<div> class='newTrailTitle'");
            var contentDivMain = $("<div> class='newTrailDescription'");
            contentDivTitle.text("Name: " + response.trails[i].name + "     Location: " + response.trails[i].location);
            contentDivMain.text("Summary: " + response.trails[i].summary);
            $("#search-results").append(contentDivTitle);
            $("#search-results").append(contentDivMain);
          }
        });
    });
});

html,
body {
  background-color: black;
  margin: 10px;
}

h1,
h3 {
  color: white;
  text-align: center;
  padding: 5px;
  line-height: 1px;
}

h1 {
  /* automatically changes lowercase to uppercase text; */
  text-transform: uppercase;
}

sub {
  color: white;
  text-align: center;
  line-height: 1px;
  font-size: 15px;
  font-weight: lighter;
}

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 800px 500px 200px 50px 100px;
  grid-gap: 3px;
}

.container>div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
}

.container>div:nth-child(1n) {
  background-color: black;
}

.container>div:nth-child(2n) {
  background-color: blue;
}

.container>div:nth-child(3n) {
  background-color: red;
}

.container>div:nth-child(4n) {
  background-color: yellow;
}

.container>div:nth-child(5n) {
  background-color: green;
}

label {
  color: white;
}

#main {
  background-image: url("assets/images/etienne-bosiger-367964.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

#au,
#cr {
  display: block;
  margin: auto;
}

#groupPic {
  padding: 10px;
}

<html>

<head>
  <link rel="stylesheet" href="test.css">

</head>

<body>
  <div class="container">
    <div id="main">
      <div id="title">

        <h1>kairns<sub>&reg;</sub></h1>
        <h3>"find your trail"</h3>
        <div class="search-div">
          <label for="txtAddress">Enter Address: </label>
          <input type="text" name="txtAddress" id="txtAddress">
          <button type="button" id="submit">Search</button>
        </div>
      </div>

    </div>



    <div class="search-results" id="search-results">2</div>

    <div>
      <p id="au">About Us</p>
      <img id="groupPic" src="http://via.placeholder.com/150x150" alt="placeholder image">
      <p id="cr">Copyright 2018.</p>
    </div>
    <div>4</div>
    <div>
      <p>Powered by
        <a href="https://developers.google.com/maps/">Google Maps</a>,
        <a href="https://openweathermap.org/api">Open Weather Map</a>, and <a href="https://www.hikingproject.com/data">Hiking Project</a>
      </p>
    </div>
  </div>

  <!-- JAVASCRIPT -->
  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- custom javaScript -->
  <script type='text/javascript' src='assets/javascript/logic.js'></script>

</body>

</html>

Answer 1

如果您应用 #search-results 元素的所有流入子元素将垂直对齐：

#search-results {
     display: flex;
     flex-direction: column;
}

将文本附加到 Div 扩展 Div 超出初始 CSS 网格

Appending Text to Div Extends Div Beyond Initial CSS Grid

html

css

css-grid