0

I have the following HTML

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="my-text" style="background-color:yellow;padding:10px;">
        <h3>Column 1</h3>
        <p>Line 1 --- Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Line 2 --- enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        <p>Line 3 --- enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
  </div>
</div>

Based on what is in the above HTML code, the height (shown in yellow background) of my text area (...) changes depending how much text Column 1 has. You can play with a jsfiddle example here:

http://jsfiddle.net/mddc/2z1t56z8/10/

What I hope to achieve is no matter how much text in Column 1, the height is always the same (a value I can specify) when col-sm-8 reaches its max in desktop (bootstrap term) and the text area can shrink like a responsive image when the browser shrinks.

I tried min-height/width, max-height/width, etc., but failed. I am unable to think of the needed CSS ways to achieve my goal.

Thanks!

curious1
  • 14,155
  • 37
  • 130
  • 231
  • 1
    Heavily related: http://stackoverflow.com/questions/1495407/how-to-maintain-the-aspect-ratio-of-a-div-using-only-css – aug Dec 03 '15 at 02:48
  • aug, thanks for giving me this valuable link. It solved my problem. – curious1 Dec 03 '15 at 06:24
  • aug, if you can add an answer pointing to the one you mentioned, I will select it. Though that post is the solution I used, the two questions are phrased differently. I will remove the answer I added. – curious1 Dec 03 '15 at 19:57
  • Thanks @curious1 I added an answer and tried to add a little more information than just a link. If I find more valuable information I'll try to add it in. Glad things worked out for you! – aug Dec 20 '15 at 00:28

2 Answers2

1

When you say behave like a responsive image, there are a couple ways that can happen. I mentioned in the comments to take a look at this question

Maintain the aspect ratio of a div with CSS

however I also it's valuable to talk about using background-size. There's a good article in MDN about Scaling background images. Both contain and cover values for background-size try their best to maintian the aspect ratio depending on the size of the container.

Hopefully this helps!

Community
  • 1
  • 1
aug
  • 11,138
  • 9
  • 72
  • 93
0

If I understand correctly, you could achieve it by:

.my-text {
  height:200px;
  overflow:scroll;
 }
kasso
  • 26
  • 4
  • Thanks for chiming in! I tried your code. The height does not shrink when the browser shrinks. – curious1 Dec 03 '15 at 03:39
  • 1
    Oh ok, sorry, I thought you wanted the height to stay the same: "What I hope to achieve is no matter how much text in Column 1, the height is always the same (a value I can specify)" – kasso Dec 03 '15 at 04:02
  • Sorry for my being unclear. when I say "shrink", I mean it should shrink like a responsive image, which shrinks in both height and width. Cheers! – curious1 Dec 03 '15 at 04:38
  • Yeah, I got it eventually :). @aug mentioned this http://stackoverflow.com/questions/1495407/how-to-maintain-the-aspect-ratio-of-a-div-using-only-css, I think that's exactly what your looking for – kasso Dec 03 '15 at 16:06