Hello, I'd like to know how to make a div height maximum f.e. 200px. If the height goes above 200px it should come some text saying "View more" or something and then it expands. This I need because I have a page where I will post posts and if the post contains large pics then I dont want the post to cover like 2000px in height, so instead of that I'd like to handle it by making the div get a maximum height.

I believe you should do this with javascript however I have no idea how to, I have googled without any results and I am hoping that you could help me with this :)

Thanks,

Mike

Recommended Answers

All 2 Replies

Mike:

You may use CSS to control the div size as followed:

<style type="text/css">
div.scrollable {
  height: 200px;
  overflow: auto;
}
</style>

In this case, you don't need to add 'view more' because the div area will automatically add a scroll bar to the viewing area if the content height is more than 200 pixels.

Thanks but I solved it by using:

var divHeight = document.getElementById(divHeight).clientHeight;

And checking if the height of the div was above the limit then add a text saying "View more" and making the max-height: 200px; and overflow:hidden;

:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.