Question

我有一个响应框，其中将添加新段落。我希望框在y方向上溢出时能够滚动而不是展开。我不想在框上以px / em等设置任何确切的高度。如果没有JavaScript，是否可以使用JavaScript？

Answer 1

不确定是否可以在没有JS的情况下进行制作，但这是一种尝试。

document.getElementById('box').style.height = document.getElementById('box').clientHeight + 'px';


function addPara() {
   var box = document.getElementById('box');
   
   box.innerHTML = box.innerHTML +  '<p>This is a very short example paragraph</p>';
}

.box {
  width: fit-content;
  border: 3px solid black;
  overflow: auto;
}

<div id="box" class="box">
  <h2>Box</h2>
</div>
<button onclick="addPara()">Add a Paragraph</button>

Js占用框的高度，并在页面加载时冻结它。

Answer 2

如果您希望容器灵活但要在其达到最大尺寸后变得可滚动，则可以使用max-height：

.content{
   width:100%;
   max-height:80px;
   background-color:cyan;
   overflow: auto;
 }

<div class="content">
  Small Bla<br>Bla
</div><br>

<div class="content">
  Overflow Bla (larger than max-height)<br> Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>
  Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>
</div>

如何制作没有“固定”高度的可滚动框？

2 个答案: