creating a dynamic height for a div - css

Question

I have a simple div that contains product information (image, title, description, price, etc...). I'm using bootstrap (3.x)On the desktop, I use a specific height for the div so everything is equal, displaying in 2 columns. On Mobile, I only have one column and I'd like to find a way to make the div height dynamic based on the size instead of setting a specific pixel height (descriptions vary and can change the height of the div quite a bit). Is this possible? The div's are created dynamically from a database...
Here's the current css - as you can see, I'm setting the height with pixels right now.
.prodBox2 {
height: 300px;
margin-bottom: 10px;
padding:5px;
border: 3px solid #666666;
border-radius:25px;
font-family: arial;
font-size: .8em;
color: rgb(50, 50, 50);
}
.prodImage2 {
float: left;
margin: 10px;
width: 125px;
height: auto;
}
Here's a codlin link if it helps:
http://codepen.io/shadowfax007/pen/xVqQNm

Answer 1

Any div's height is dynamic by default. So all you need to do is wrap the height condition in a media query (at screen widths above 768px):
#media(min-width: 768px) {
.prodBox2 {
height: 300px;
overflow-y: auto;
}
}
.prodBox2 {
margin-bottom: 10px;
padding: 5px;
border: 3px solid #666666;
border-radius: 25px;
font-family: arial;
font-size: .8em;
color: rgb(50, 50, 50);
}
.prodImage2 {
float: left;
margin: 10px;
width: 125px;
height: auto;
}
As a side note, you probably want to do some reading on responsiveness, you are currently doing it wrong. In any good responsive design, you do not need to specify heights.