How to adjust height of sidebar elements?

Navigation
1

I'm having this problem where something from the "DIV Feed" is exceeding the size of its "parent DIV". I am willing to better explain the problem if necessary.

HTML: 

<div class="container">
  <div class="row">
    <div class="col-md-2 text-center">
      <ul class="nav nav-stacked feed-adaptation">
        <li class="active"><a href="#"><img src="imagens/abc.png" class="img-responsive"></a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">TEAM</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>

      <div class="container-feed">
          <div class="header-feed">
            <span class="feed-name">FEED</span>
          </div>

          <div class="thumbnail">
            <img class="img-thumbnail" src="imagens/social-icons/facebook.png" alt="">
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>

          <div class="thumbnail">
            <img class="img-thumbnail" src="imagens/social-icons/twitter.png" alt="">
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>

          <div class="thumbnail">
            <img class="img-thumbnail" src="imagens/social-icons/facebook.png" alt="">
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>
        </div>

    </div>
    <div class="col-md-10">
      <div class="conteudo">
        <h1 class="home-text title"><b>/</b>Hello word</b></h1>
        <p class="home-text">subtitle</p>
      </div>
    </div>
  </div>
</div>

CSS: 

.col-md-2.text-center {
    padding-right: 0px;
    padding-left: 0px;
    background-color: #ebebeb;
    height: 100%;
}

.thumbnail {
    background-color: transparent;
    border: none;
    display: inline-block;
    width: 90%;
    margin: 0 auto;
}

.row {
    height: auto;
}

.container {
    height: auto;
}
    
asked by anonymous 09.02.2014 / 21:32

2 answers

1

At first, it seems like you just put a overflow: hidden rule in the "parent DIV". But this will "cut the surplus" by hiding part of the "DIV daughter."

Try removing the height: 100% rule from the "parent DIV."

In fact, it's probably best to remove all height of your CSS code. I would not make changes to .row and .container , Bootstrap fundamentals ...

And instead of changing the Bootstrap class .col-md-2.text-center , I would create a class with another name, to apply to the "parent DIV."

HTML 

<div class="col-md-2 text-center navegacao">

CSS 

.col-md-2.text-center.navegacao {
    padding-right: 0px;
    padding-left: 0px;
    background-color: #ebebeb;
}

.thumbnail {
    background-color: transparent;
    border: none;
    display: inline-block;
    width: 90%;
    margin: 0 auto;
}
    
09.02.2014 / 22:15
0

I could not reproduce your problem exactly as your code is (height expressed in percentage - but height in pixels the problem appears ), but it seems to me that it's because you've assigned an explicit height to the parent div ( .col-md-2.text-center ) but not to the child div ( .container-feed ). In this case, it grows beyond the boundaries of the container, and by default is visible beyond those boundaries.

If you add a rule of overflow to the parent div, however, the child div will stop exceeding these bounds, and behave according to the specified rule (except overflow: none , which is the same as not having this rule). Using overflow: hidden for example, as I suggest by @J. Bruni, will make the excess "discarded" , which may or may not be what you want (the lower edges, for example, will be invisible, and any partial content will be inaccessible in the same way). Using overflow: scroll or overflow: auto would allow you to roll the entire parent div - which can be kind of "weird" ...

If you are not satisfied with these solutions, I suggest explicitly assigning the height of the child div. So it will not exceed the height of the container, and you can still assign a scrolling rule to it only, if it so desires. Example .

    
09.02.2014 / 22:28
Populating database with Eloquent ORM Gravatar in ruby-on-rails 3.2