0

I have the below structure:

<div class="wrapper1">
     <div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
     <div class="right">some content here</div>
</div>
<div class="items">
  <ul><li></li></ul>
</div>

The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.

Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.

I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.

Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.

Also, there are 2 main issues here,

1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.

2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.

Could anyone please suggest some solution.

Apurva T
  • 137
  • 1
  • 2
  • 12
  • 1
    Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D May 01 '16 at 08:47
  • Possible duplicate: http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space – marvinhagemeister May 01 '16 at 08:57

2 Answers2

0

With flexbox the columns share the same height automatically, without any javascript.

.wrapper {
  display: flex; 
}

.left {
  background: yellow;
  flex: 1;
}

.right {
  background: red;
  flex: 1;
}
<div class="wrapper">
     <div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
     <div class="right">some content here</div>
</div>
marvinhagemeister
  • 2,801
  • 1
  • 22
  • 27
-1

  1. I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3

  2. Create a div with relative position for appending links and make it in the bottom of the container div

Andrei
  • 42,814
  • 35
  • 154
  • 218
Abdallh Abukhader
  • 50
  • 6
  • **This is really a comment, not an answer.** I appreciate that you may not yet have sufficient reputation to leave comments but please do not use the answer system as a replacement. Gaining reputation is fairly easy and only requires a little effort on your part. Thanks! – Paulie_D May 01 '16 at 08:46