在div中显示“显示更多”按钮而不是垂直滚动条

Question

我有一个包含一些html内容的固定高度div。当这个高度溢出时，我不希望滚动条出现，而是在div底部的按钮。只有当你按下这个按钮时，所有的内容才会显示出来，显然滚动条会自动显示。我知道有一个名为“溢出”的属性，你可以使用“滚动”值，但我不需要滚动条，直到用户按下按钮。请注意，如果没有发生溢出，应该没有按钮。

---------------div starts----------------- 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT  

    [SHOW MORE BUTTON ] 

---------------div ends----------------- 

你会如何实现这个没有jQuery的？你如何使用JavaScript来感知内容会溢出？

Answer 1

您可以使用css仅实现此目的（使用checkbox和:checked css状态）。

让我知道，如果不清楚。

注意：max-height:500px;这只是一个例子。如果内容应该更大，请使用此值。

input[type="checkbox"] { 
 
    display:none; 
 
} 
 

 
label { 
 
    color:blue; 
 
    text-decoration:underline; 
 
    margin-top:10px; 
 
    cursor:pointer; 
 
    display:inline-block; 
 
} 
 

 
label:after { 
 
    content:"more"; 
 
} 
 

 
input:checked ~ label:after { 
 
    content:"less"; 
 
} 
 

 
.inner { 
 
    max-height:100px; 
 
    overflow:hidden; 
 
    transition:all .3s ease; 
 
    width:100px; 
 
} 
 

 
input:checked + .inner { 
 
    max-height:500px; 
 
}

<div class="outer"> 
 
    <input type="checkbox" id="readmore" /> 
 
    <div class="inner"> 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    CONTENT CONTENT CONTENT CONTENT 
 
    </div> 
 
    <label for="readmore">Read </label> 
 
</div>