css - 如何在不指定父元素高度的情况下显示子元素 ('.cylon' )

Question

有谁知道如何在不指定父元素(.container)?我希望容器具有流畅的高度，以便能够完全显示结果元素 (#result)。

// DOM elements
const minInput = document.getElementById("minInput");
const maxInput = document.getElementById("maxInput");
const generate = document.getElementById("generate");
const reset = document.getElementById("reset");
const result = document.getElementById("result");

generate.addEventListener("click", function() {
  // Determine the min and max number of the users input
  let min = Math.min(minInput.value, maxInput.value);
  let max = Math.max(minInput.value, maxInput.value);

  // Calculate a random number
  const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);

  // Render random number to DOM
  result.textContent = `Random number: ( ${randomNumber} ) between ${min} and ${max}`;
});

// Reset elements
reset.addEventListener("click", function() {
  minInput.value = "";
  maxInput.value = "";
  result.textContent = "";

  minInput.focus();
});

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  color: #fff;
  /* height: 100vh; */
  background-color: #191919;
}

.container {
  width: 100%;
  height: 245px;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  background-color: #000;
}

.text {
  float: left;
  width: 100%;
  padding: 5px 20px;
}

.generator {
  width: 100%;
  display: grid;
  grid-gap: 1.3em;
  align-items: end;
  grid-template-columns: repeat(2, 1fr);
}

input {
  border: 0;
  height: 25px;
  width: 100%;
  padding-left: 5px;
  border-radius: 5px;
}

button {
  padding: 5px 0;
  color: #fff;
  background-color: transparent;
}

button:hover {
  cursor: pointer;
  background-color: rgb(29, 29, 29);
}

.cylon {
  width: 20%;
  height: 100%;
  background-color: red;
  background-image: -webkit-linear-gradient( left, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  animation: move-eye 4s linear infinite alternate;
}

@keyframes move-eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

<div class="container">
  <div class="text">
    <h1>Random number generator </h1>
    <div class="generator">
      <div class="box">
        <label for="min">Min</label>
        <input type="number" placeholder="Enter the minimum #" id="minInput">
      </div>

      <div class="box">
        <label for="max">Max</label>
        <input type="number" placeholder="Enter the maximum #" id="maxInput">
      </div>

      <button id="generate">Generate</button>
      <button id="reset">Reset</button>
    </div>

    <p id="result"></p>
  </div>

  <div class="cylon"></div>
</div>

Answer 1

这里有一个快速的解决方案:

1. 在 .cylon div 中放置一些文本

   <div class="cylon">any text</div>
   

2. 在您的 CSS 中，将以下样式添加到 .cylon

   color: rgba(0,0,0,0);
   

希望这对您有所帮助。