如何在 div 中的段落高度达到 500px 后将其高度 (500px) 更改为自动？

我想要一个文本框，你可以在其中写字，目前我正在使用带有背景的div和

div内部的段落((。我希望div 覆盖页面，除了边距，但是如果你超过 500px 的限制，CSS 中div 的高度会更改为自动，这样当你向下页面时仍然有背景。

下面的代码不是完整版本，为了简单起见，我删除了不必要的内容。

/* Body Preferneces */
body {
  background-color: #00C5CD;
  font-size: 25px;
}
/* Paragraph Text Preferences */
p {
  font-size: 25pt;
  color: #000;
}
#text {
  background-color: #fff;
  border: none;
  text-align: left;
  display: block;
  font-size: 16px;
  width: auto;
  height: auto;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="CSS.css">
</head>
<body>
  <div id="text">
    <div id="identifier">
      <p contenteditable="true"></p>
    </div>
  </div>
</body>
</html>

扩展@MichaelCoker的评论... min-height效果很好：

/* Body Preferneces */
body {
  background-color: #00C5CD;
  font-size: 25px;
}
/* Paragraph Text Preferences */
p {
  font-size: 25pt;
  color: #000;
}
#text {
  background-color: #fff;
  border: none;
  text-align: left;
  display: block;
  font-size: 16px;
  width: auto;
  height: auto;
  min-height: 500px;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="CSS.css">
</head>
<body>
  <div id="text">
    <div id="identifier">
      <p contenteditable="true"></p>
    </div>
  </div>
</body>
</html>

希望对你有帮助

相关内容

最新更新

热门标签：