отзывчивая высота не работает и не может найти правильный ответ - PullRequest
Новая
       18

отзывчивая высота не работает и не может найти правильный ответ

0 голосов
/ 03 марта 2019

Привет, у меня есть вопрос, и я не могу найти ответ, который работает здесь.Я делаю простой сайт портфолио со слайд-шоу в нем.Слайд-шоу имеет стрелки, а также те маленькие точки / цифры внизу, чтобы выбрать, к какой фотографии идти.Сейчас я пытаюсь сделать так, чтобы прямоугольник («основной») соответствовал высоте экрана, чтобы мое слайд-шоу было отзывчивым (стрелки в нижней части экрана, а не по бокам, когда вы уменьшаете размер экрана).Тем не менее, у меня много проблем!Почему-то моя главная больше, чем высота моего экрана, поэтому всегда появляется скроллер.Я не знаю, как я могу решить это.Как я могу сделать мой основной всю высоту моего экрана?На мобильном телефоне это даже не половина экрана, а на моем ноутбуке он слишком большой ... 

.menu {
	width:10%;
	border: 1px solid red;
}

.main {
  max-width:100%; 
  width: 90%;
  display: inline-block;
  float: right;
  border: 1px solid red;

}
<main> 
	<div class="main">
<div class="slideshow-container">

<!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="3D/ogen.jpg" id="ogen">
  </div>

	<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>	
	 
  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>


	</div> 
	
	</main>

Я только начинаю, извините, если это действительно простой вопрос с легким исправлением.Я просто не могу понять это.

Ответы [ 3 ]

0 голосов
/ 03 марта 2019

Используйте 100vh как высоту.Это займет высоту области просмотра, которая является высотой устройства.

0 голосов
/ 03 марта 2019

Пожалуйста, прочтите это.

height: 100vh = 100% высоты области просмотра

height: 100% = 100% высоты элемента родителя

Именно поэтому вынужно добавить height: 100% к html и body, так как они по умолчанию не имеют размера

Что-то, что вы должны знать: если вы используете% для вертикального поля или отступа,% будетрассчитывается по ширине родительского элемента, а не по высоте.

Совет: попробуйте использовать единицы измерения vh и vw для размера шрифта :) Мне нравится этот (не поддерживается в некоторых известных мне браузерах): font-size: calc(.5vh + .5vw); (например)

См. хорошую страницу здесь для CSS-единиц: http://css -tricks.com / the-lengths-of-css /

0 голосов
/ 03 марта 2019

Вы можете добавить height: 100vh; к вашему классу CSS .main, чтобы гарантировать, что ваш div займет всю высоту окна просмотра

...