Блог

Главная - Вопросы по программированию - Divs не имеют одинаковой высоты

Divs не имеют одинаковой высоты

#javascript #html #css

#javascript #HTML #css

Вопрос:

Div боковой панели (красный) и div панели навигации (синий) не имеют одинаковой высоты. Отлично смотрится в хорошем разрешении, 1444 * 900 в моем случае. Но когда я пытаюсь использовать разрешения, подобные 800 * 600, div не имеют одинаковой высоты. И я не знаю, почему над красным div есть черная линия. Div боковой панели — это div внутри div, я думаю, что это проблема, я не могу найти, как исправить.

введите описание изображения здесь

 var sticky = document.querySelector('.sticky');
      var divSticky = document.querySelector('.sidenavdiv');
		  document.addEventListener('scroll', function () {
		    if(window.scrollY > 0){
		    	sticky.classList.add('fixed')
          divSticky.classList.add('sidenavdivfixed')
		    }else{
		    	sticky.classList.remove('fixed');
          divSticky.classList.remove('sidenavdivfixed');
		    }
		  });  
 /* Sidenav */
.sidenav {
  height: 100%;
  width: 15%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 15%; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.sidenavdiv{
  background-color:red;
  height: 150px;
  transition: .32s;
}

.sidenavdivfixed{
  height: 88px;
  transition: .32s;
}
/* Sidenav */

/* Navbar */
.sticky {
  position: sticky;
  font-size: 32px;
  top: 0;
  width: 100%;
  height: 150px;

  background: #34495e;
  color: white;
  transition: .32s;
}

.fixed {
  font-size: 24px;
  position: fixed;
  height: 77px;
  transition: .32s;
}

body {
  margin: 0;
}

:root {
  height: 1000%;
  font-family: sans-serif;
}

/* Navbar */  
 <table class="sticky top"> 
  <tr>
		<td width="15%" ></th>
		<td>Hello</td>
  </tr>
</table>

<div class="sidenav">
  <div class="sidenavdiv">
    hello
  </div>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h2>Titulo</h2>
  <p>Text.</p>
  <p>Text.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

Комментарии:

1. вы применяете padding-top к некоторому медиа-запросу

Ответ №1:

Замените @media screen и (максимальная высота: 450 пикселей){.sidenav {padding-top: 0px;} .sidenave a {размер шрифта: 18 пикселей;}. Надеюсь, это сработает.

Ответ №2:

Я узнал, что у вас есть медиа-запрос:

 @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

Это отступ над вашей красной боковой панелью.

Ответ №3:

Как уже упоминалось, у вас было дополнительное дополнение на боковой панели в медиа-запросе (если предполагается, вы также должны добавить его на панель навигации)

А фиксированные классы боковой панели и панели навигации не имели одинаковой высоты (88px / 77px). Я установил оба значения в 77 пикселей:

 var sticky = document.querySelector('.sticky');
var divSticky = document.querySelector('.sidenavdiv');
document.addEventListener('scroll', function() {
  if (window.scrollY > 0) {
    sticky.classList.add('fixed')
    divSticky.classList.add('sidenavdivfixed')
  } else {
    sticky.classList.remove('fixed');
    divSticky.classList.remove('sidenavdivfixed');
  }
});  
 /* Sidenav */

.sidenav {
  height: 100%;
  width: 15%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 15%;
  /* Same as the width of the sidenav */
  font-size: 28px;
  /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav a {
    font-size: 18px;
  }
}

.sidenavdiv {
  background-color: red;
  height: 150px;
  transition: .32s;
}

.sidenavdivfixed {
  height: 77px;
  transition: .32s;
}


/* Sidenav */


/* Navbar */

.sticky {
  position: sticky;
  font-size: 32px;
  top: 0;
  width: 100%;
  height: 150px;
  background: #34495e;
  color: white;
  transition: .32s;
}

.fixed {
  font-size: 24px;
  position: fixed;
  height: 77px;
  transition: .32s;
}

body {
  margin: 0;
}

:root {
  height: 1000%;
  font-family: sans-serif;
}  
 <table class="sticky top">
  <tr>
    <td width="15%">
      </th>
      <td>Hello</td>
  </tr>
</table>

<div class="sidenav">
  <div class="sidenavdiv">
    hello
  </div>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h2>Titulo</h2>
  <p>Text.</p>
  <p>Text.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>