Блог

Я создал только 100% всей страницы, но на этот раз мне нужна 100% высота элемента (div) внутри родительского элемента.

Я попытался перечитать это для элементов 100% высоты внутри родительских элементов, но пока ничего не сработало.

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 является ли родительским элементом .links

пример: хотите, чтобы серая рамка доходила сверху донизу:

Попробуйте следующий трюк:

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

Настройте значения для вашего собственного случая.
Взгляните на пример кода http://jsfiddle.net/kXfsY/9/
Также здесь подробно описан один интересный метод —http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Я предлагаю использовать float: left в вашем div.links и поместить ваши тексты «Лапа за лапу» в другой div (я предполагаю, что эти тексты должны быть справа от вашего div.links, когда div занимает всю высоту слева? ). min-height: 100% Отлично работает в моем тестировании. Кроме того, не могли бы вы сообщить нам, какой браузер вы используете для теста? Еще одна вещь, поскольку вы используете заполнение div.links и одновременно хотели height: 100% , я думаю, вам нужно что-то сделать margin offset , чтобы получить желаемый результат.

Используйте фоновое изображение или JavaScript.