Позвольте div заполнить остальную часть моего html

Я создал заголовок, тело и нижний колонтитул для моего html. Ниже приведен код:Позвольте div заполнить остальную часть моего html

JSFIDDLE

JSFIDDLE

Я сделал мое тело (#number), чтобы иметь фон красного цвета, но он не будет отображаться. Я не установил его высоту и просто установил его на 100%, потому что просто хочу, чтобы он заполнил середину страницы. Почему красный фон не появится?

источник

2015-08-07 Coolguy

Classic проблема. В Интернете много примеров, чтобы сделать высоту блока 100%, проверить. Отказ: родитель элемента должен также иметь определенную высоту. – VisioN

[Проверьте этот пост около 100% высоты] [1] [1]: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window – LcKjus

Вопросы, требующие помощи по отладке («почему этот код не работает?») Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для его воспроизведения ** в самом вопросе. ** NB - ** Пожалуйста, Не злоупотребляйте блоками кода, чтобы обойти это требование **. –

Если вы не добавить атрибут мин-высота в CSS, как:

#numbers { 
    min-height:30px; 
}

или

<div id="numbers" style="min-height:30px" class="container-fluid"></div>

вы можете также думать о добавлении пространства в этом Div: см here

или добавьте фоновый цвет к вашему # владельцу

источник

2015-08-07 10:01:29 bloC

Это не имеет смысла для большинства браузеров. Чтобы иметь 100% высоту элемента, его родитель должен также иметь строго определенную высоту. – VisioN

Для этого вы должны установить высоту всех родителей div. Добавить CSS -

html, body, #holder { 
    height: 100%; 
}

https://jsfiddle.net/o5rw4b82/6/

источник

2015-08-07 10:05:07

Почему красная область перекрывает нижний колонтитул? – Coolguy

@Coolguy, потому что его 'высота' составляет 100% для контейнера, то есть' # holder', чтобы он соответствовал вам, вы должны использовать это: 'height: calc (100% - x)' где x is heightOfYourTopNav (55px) плюс 'margin-top' или' padding-top', если таковые имеются. –

 #header { 
 
      background-color: #273746; 
 
      height: 55px; 
 
      box-shadow: 2px 2px 2px 2px; 
 
     } 
 
     #numbers { 
 
      background-color: red; 
 
      height: 83vh; 
 
     } 
 
     #keypad { 
 
      height: 30px; 
 
      background-color: springgreen; 
 
      text-align: center; 
 
      box-shadow: 15px 15px 15px 15px black; 
 
     } 
 
     .footer { 
 
      width: 100%; 
 
      position: absolute; 
 
      left: 0; 
 
      bottom: 0; 
 
     }

<div id="holder"> 
 
    <div id="header" class="container-fluid"> 
 
    <div class="navbar"> 
 
     <a href="#menu-toggle" id="menu-toggle" class="glyphicon glyphicon-menu-hamburger"></a> 
 
     <a class="navbar-brand">Keypad <span id="counterId"></span></a> 
 
    </div> 
 
    </div> 
 
    <div id="numbers" class="container-fluid"> 
 

 
    </div> 
 
    <footer class="footer"> 
 
    <div id="keypad" class="container-fluid"> 
 
     <a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad 
 
       </a> 
 
    </div> 
 
    </footer> 
 
</div>

источник

2015-08-07 10:05:09 imGaurav

Установите высоту до 83vh? Но тогда, если другому устройству понадобится разная высота? – Coolguy

извините, сделайте это 100vh, это займет полную высоту оставшейся страницы – imGaurav

Вы можете сделать это красиво с Flexbox

#header{ background-color: #273746 ; height:55px; box-shadow: 2px 2px 2px 2px;} 
 
#numbers{background-color: red; flex-grow:1; } 
 
#keypad{height:30px;background-color: springgreen; text-align: center; box-shadow: 15px 15px 15px 15px black;} 
 
#holder { 
 
    height:100vh; 
 
    display:flex; 
 
    flew-wrap:wrap; 
 
    flex-direction:column; 
 
} 
 
body { 
 
    margin:0; 
 
    }

 <div id="holder"> 
 
     <div id="header" class="container-fluid"> 
 
      <div class="navbar"> 
 
       <a href="#menu-toggle" id="menu-toggle" class="glyphicon glyphicon-menu-hamburger"></a>  
 
       <a class="navbar-brand">Keypad <span id="counterId"></span></a> 
 
      </div> 
 
     </div> 
 
     <div id="numbers" class="container-fluid"> 
 

 
     </div> 
 
     <footer class="footer"> 
 
      <div id="keypad" class="container-fluid"> 
 
       <a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad 
 
       </a> 
 
      </div> 
 
     </footer> 
 
</div>

источник

2015-08-07 10:18:59 AlfonsoML

Позвольте div заполнить остальную часть моего html

ответ

Смежные вопросы