Невозможно изменить высоту div на 100% (но может изменить ширину)

Question

Я сейчас работаю над веб-сайтом. Я просмотрел похожие вопросы, но не нашел решения для своего затруднительного положения. Изменения, которые я применяю к внешнему и даже встроенному CSS, всегда игнорируются, когда дело касается высоты. Однако я могу изменить ширину div.

Что происходит? Что мне не хватает?

<div id="mainsection" style="height: 100%; width: 100%; border: 5px solid red; display: block;"> 

      <!-- Header 
============================================= --> 
<header id="header" class="transparent-header style-1 dark no-sticky"> 

     <div id="header-wrap"> 

      <div class="container clearfix"> 

       <div id="primary-menu-trigger"><i class="icon-reorder"></i></div> 

       <!-- Logo 
       ============================================= --> 
       <div id="logo"> 
        <a href="index.php" class="standard-logo" data-dark-logo="images/logo.png"><img src="images/logo.png" alt="Brasillis Idiomas Logo"></a> 
        <a href="index.php" class="retina-logo" data-dark-logo="images/logo.png"><img src="images/logo.png" alt="Brasillis Idiomas Logo"></a> 
       </div><!-- #logo end --> 

       <!-- Primary Navigation 
       ============================================= --> 
       <nav id="primary-menu" class="sub-title"> 

        <ul > 
         <li><a href="index.php"><div>Home</div><span >Brasillis e você</span></a></li> 
         <li><a href="quemsomos.php"><div>Quem Somos</div><span >Desde 1992</span></a></li> 
         <li><a href="cursos.php"><div>Cursos</div><span >Idiomas e intérpretes</span></a></li> 
         <li><a href="servicos.php"><div>Serviços</div><span >Tradução e Transcrição</span></a></li> 
         <li><a href="contato.php"><div>Contato</div><span >E informações</span></a></li> 
        </ul> 

       </nav><!-- #primary-menu end --> 

      </div> 

     </div> 
</header><!-- #header end --> 
     <section id="page-title" class="page-title-parallax page-title-dark page-title-center" style="background-image: url('images/fotos/BrasillisOficialEscuro.jpg'); background-size: cover; background-position: top center;" data-stellar-background-ratio="0.8"> 
      <div class="container clearfix"> 
       <h1 style="font-size: 3em;">Seja bem vindo ao Brasillis</h1> 
       <span>Milhares de alunos formados e eventos bem-sucedidos desde 1992</span> 
      </div> 
     </section> 

     <div class="clearfix col_full"> 
       <div class="col_full common-height"> 

        <div class="col-md-4 dark col-padding ohidden" style="background-color: #32587E; box-shadow: 3px 3px 5px #ccc;"> 
         <div> 
          <h3 class="uppercase" style="font-weight: 600;">NOSSOS CURSOS</h3> 
          <p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p> 
          <a href="cursos.php" class="button button-border button-light button-rounded uppercase nomargin">Saiba mais</a> 
         </div> 
         <i class="icon-comments bgicon"></i> 
        </div> 

        <div class="col-md-4 col-padding ohidden" style="background-color: #F1F1F1; box-shadow: 3px 3px 5px #ccc;"> 
         <div> 
          <h3 class="uppercase" style="font-weight: 600;">NOSSOS SERVIÇOS</h3> 
          <p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p> 
          <a href="servicos.php" class="button button-border button button-rounded uppercase nomargin">Saiba mais</a> 
         </div> 
         <i class="icon-briefcase bgicon"></i> 
        </div> 

        <div class="col-md-4 dark col-padding ohidden" style="background-color: #339933; box-shadow: 3px 3px 5px #ccc;"> 
         <div> 
          <h3 class="uppercase" style="font-weight: 600;">PORTAL DO ALUNO</h3> 
          <p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p> 
          <a href="cursos.php" class="button button-border button-light button-rounded uppercase nomargin">Em breve</a> 
         </div> 
         <i class="icon-user bgicon"></i> 
        </div> 

       </div> 
     </div> 

    </div> 

Answer 1

Во-первых: Если вы хотите, чтобы никто не получал ваш код, вы не можете публиковать свой сайт в Интернете. Как только вы его загрузите, каждый сможет получить ваш код.

Позвольте мне ответить на ваш вопрос. Вы думали о том, что означает 100%? Если вы поместили больше содержимого внутри контейнера, полная высота изменится, на самом деле высота параметра может быть выше, чем высота вашего видового экрана. Вы хотите «100%» высоты просмотра, поэтому используйте «100vh» вместо «100%»!

height: 100vh; 

Answer 2

До сих пор я вижу, что вы использовали высоту: 100%. Это не работает, я не уверен, почему нет, но у меня есть желание для вас.

Вы можете использовать высоту: 100vh; vh означает: высота просмотра, поэтому это означает, что она будет занимать высоту экрана, на котором вы смотрите.