Процент высоты ребенка в CSS - PullRequest
Новая
       0

Процент высоты ребенка в CSS

0 голосов
/ 25 марта 2012

Я пытаюсь установить высоту дочернего элемента в процентах от его родителя.Вот мои настройки: 

    .html, .body {height: 100%; width: 100%}
        /* test is a child of body to ensure content is aligned in the middle */
    .test {
        width: 90%;
        height: 100%;
        position: absolute;
        left: 5%;
        top: 0%;
        margin: -0% 0 0 0%;
     }
     /* top banner */
    .banner { 
      height: 100px;
      margin-left: 2%;
      width: 96%;
    }
    /* rest of the content */
    .center{
       background-color: #FFFFFF;
       height: 80%;
       margin-left: 2%;
       margin-top: 10px;
       overflow-x: auto;
       padding: 3px;
       position: relative;
       width: 95%;
   }
   /* content inside center */
   .iwant-event {
      height: 100%;
      left: 0;
      width: 84.5%;
   }

Можно было бы ожидать, что класс iwant-event заполнит 100% центра.В хроме я получаю такое поведение.Однако в Firefox iwant-event не заполняет 100% центра.Упрощенная версия моего HTML: 

<body>
  <div class="test">
     <div class="banner">Banner stuff here</div>
     <div class="center">
        <div class="iwant-event"></div>
     </div>
  </div>
</body>

Я достаточно хорошо знаком с базовым CSS, но никогда раньше не пытался разрабатывать для многих браузеров.Буду признателен за любую помощь.

Ответы [ 2 ]

0 голосов
/ 25 марта 2012

Можно было бы ожидать, что класс iwant-event заполнит 100% центра.

Что не происходит точно?Вы хотите iwant-event заполнить контейнер по горизонтали и вертикали?Это заполняет его вертикально, насколько я могу видеть.По горизонтали это не так, потому что у вас есть правило: 

.iwant-event { 
  width: 84.5%;
}

Вам нужно изменить это на ... 

.iwant-event { 
  width: 100%;
}

... для полного горизонтального заполнения.И, конечно, у вас также есть 3px отступа на center, поэтому вам нужно удалить это, чтобы получить iwant-event для полного заполнения center.

0 голосов
/ 25 марта 2012

Вы уверены, что это не работает в FF?Скрипка здесь: http://jsfiddle.net/mZ3Vp/1/ отлично работает на моей машине.Если это не работает для вас, не могли бы вы указать, на какой ОС вы работаете и какую версию FF вы используете?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...