0

jSfiddle: https://jsfiddle.net/uhscokco/ left-menu div didnt have same height with main

I am trying overflow, but it's add scroll bar, seeing many posts in stackoverflow, but cant decide this problem. Thanks

<header>
  <div class="logo"></div>
  <div class="right"></div>
  <br style="clear: both">
</header>
<div class="content">
  <div class="leftMenu"></div>
  <div class="main">
    <div class="hotSpots">
    <div class="block1">
      <div class="icons">icon</div>
      <div class="table">
        <table>
          <tr>
            <td>1</td>
            <td>name</td>
            <td>locations</td>
            <td>shares</td>
            <td>social</td>
            <td>redirect</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
         </table>
        </div>
       </div>
      </div>
    </div>
   </div>
unrealisted
  • 11
  • 1
  • 1
    What is the actual problem? The scrollbar you're getting is for the browser window, not the div containing the table. This is the expected behaviour. What is the css you are using? What do you want it to actually accomplish? – Ryan Dec 02 '16 at 23:11
  • See jsfiddle please – unrealisted Dec 02 '16 at 23:17
  • Your JSFiddle doesn't tell anyone anything about what you're trying to accomplish. I did look at the JSFiddle. I saw a table behaving exactly the way your HTML says it should. – Ryan Dec 02 '16 at 23:19
  • @Ryan left-menu div didnt have same height with main – unrealisted Dec 02 '16 at 23:54
  • You're simply tossing around half-formed sentence fragments and expecting people to be able to interpret what your question should be in a cogent way. I'm down-voting this. If you manage to put together an actually coherent question to ask maybe try re-posting this issue. – Ryan Dec 03 '16 at 00:05
  • @Ryan What do you not understand? Div with class left-menu dont have same height as the div main class i need same heightes. lol – unrealisted Dec 03 '16 at 00:12
  • Then either add additional height to the left side div to bring it equal with the table, or set both to have the same max-height value and find some way to deal with the table overflow. – Ryan Dec 03 '16 at 00:14
  • @Ryan it must be 100% height on both, cause content maybe growing in height – unrealisted Dec 03 '16 at 00:20
  • 100% height only sets the height to the current height of the parent. If the table goes longer than that, which is precisely what is happening here, then it's going to expand the div to fit. The browser doesn't know that you want it to also expand a completely different div by the same amount just by magic. You can constrain both to 100% height and then use overflow to allow the table div to scroll if need be. You seem to completely misunderstand how the height attribute works. – Ryan Dec 03 '16 at 00:24
  • @Ryan so, okay it's 100%, and how i can disable scrollbar in table? not standard scrollbar of browser – unrealisted Dec 03 '16 at 00:28
  • That would be a two second lookup of the overflow property, so have at it It would also cut your table off and leave the portion below he bottom of the div inaccessible. Is this actually what you want? – Ryan Dec 03 '16 at 00:30
  • @Ryan That's what I do not want to, because it hides part of the table, that's asking how to do that both are equal, and if the table is stretched increases) – unrealisted Dec 03 '16 at 00:32

3 Answers3

0

If you want to use a percentage as the height; make sure your body has 100% as the height. Then set height on the parent container div called content. Otherwise, set height for your heights in em or px. The add this to the content div.

.content:after { 
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
 }

This article has everything you need to understand how to use floats: https://css-tricks.com/all-about-floats/

If you don't need to support legacy browsers consider flexbox. Instead of floats. To avoid the erratic behaviour which can be experienced when starting to use floats.

Both these approaches will avoid cropping on your table. If you set overflow:none.

edlee
  • 665
  • 1
  • 7
  • 20
  • Body, parent - height 100%, no result. Need support – unrealisted Dec 03 '16 at 00:39
  • See the part in the css-tricks article, linked above, called the great colapse. With out extra divs using overflow auto will not work. You need to force the parent to the height of the children. – edlee Dec 03 '16 at 00:48
0

Is this what you are trying to achieve? https://jsfiddle.net/dfcsj5mz/

    $( window ).resize(function() {
      $('#leftMenu').height($('.main').height())
    });

I just re-adjusted the height on resize.

Monstrum
  • 88
  • 15
0

please check this link: https://jsfiddle.net/g4pp2wae/2/

.scroll sets height of left-menu on page scroll and $(document).ready sets the height when the page is loaded for the first time.

all position are absolute.

    $(document).ready(function () {
    var temp;
    temp = $(".main-content").height();
    $(".left-menu").css("height",temp + "px");
});
$(window).scroll(function () {
    var temp;
    temp = $(".main-content").height();
    $(".left-menu").css("height",temp + "px");
})
Ahmadreza_HK
  • 364
  • 1
  • 5
  • 10