CSS

I have only made a 100% of the whole page, but this time I need a 100% height of element (div) inside of a parent.

I tried to re-read this for 100% height elements inside of parents, but nothing has worked so far.

http://peterned.home.xs4all.nl/examples/csslayout1.html

HTML:

<div class="links content">
  <ul>
      <li>
        <h3> News </h3>
        <ul>
          <li><a href="#">Adoption Stories</a></li>
          <li><a href="#">Shelter News</a></li>
          <li><a href="#">Paw For Paw</a></li>
        </ul>
      </li>
      <li>
        <h3> Resources </h3>
        <ul>
          <li><a href="#">Breed Info</a></li>
          <li><a href="#">Dog Care</a></li>
        </ul>
      </li>
      <li>
        <h3> Save a Paw </h3>
        <ul>
          <li><a href="#">Adopt</a></li>
          <li><a href="#">Donate</a></li>
          <li><a href="#">Volunteer</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- .links -->

CSS:

#main-content {
  background: #a8bfa5;
}

.links {
  background: #d4d7d8;
  padding: 10px;
  width: 190px;
  min-height: 100%;
}

.links ul {
  padding: 5px;
}

.links ul li {
  padding: 5px;
}

#main-content is the parent of .links

example: want the gray box to reach top to bottom:

enter image description here

How do I make my div 100 height relative to parents?

Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

How do you make Flexbox children 100% height of their parents using CSS?

Getting the child of a flex-item to fill height 100%Set position: relative; on the parent of the child. Set position: absolute; on the child. You can then set width/height as required (100% in my sample).

How do you make a element full height in CSS?

height:100vh When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.

How do you inherit parent height in CSS?

height: 100% will match the height of the element's parent, regardless of the parent's height value. height: inherit will, as the name implies, inherit the value from it's parent. If the parent's value is height: 50% , then the child will also be 50% of the height of it's parent.

Try the following trick:

#main-content {
   overflow: hidden;
}
.links {
   padding-bottom: 1000px;
   margin-bottom: -1000px;
}

Adjust the values for your own case. Take a look at an example code http://jsfiddle.net/kXfsY/9/ Also here is one interesting technique explained in detail - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

CSS - How to have 100% height element inside of parent

Tags:

html

height

nowayyy

People also ask

1 Answers

yatskevich

Recent Activity

Donate For Us