CSS - vh работает, а процент - нет

Для проекта я начал делать шаблон, содержащий баннер (80% страницы).

Вчера возникла проблема с использованием %. % у меня не работал, в то время как vh работал. Кто-то сказал, что проблема в том, что div, в который я поместил фон, также находится в div, но без высоты. Я определил это для 100%. Но все равно не работает. background-image такой же большой, как и содержимое самого div.

Мои коды:

@charset "utf-8";
/* CSS Document */
/*MAIN*/
body{
	width: 100%;
	height: 100%;
}
/*BANNER*/
#banner{
	width: 100%;
	height: 100%;
	background-color: black;
}
#bannerimg{
	background-image: url("https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	height: 80%;
}

<!DOCTYPE html>
<html>
	<head>
		<!--ALGEMEEN-->
		<meta charset = "utf-8">
		<title>Homepagina - RC paneel</title>
		<!--FONT-->
		<!--INCLUDE-->
		<link href = "//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel = "stylesheet" type = "text/css" />
		<script src = "//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
		<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
		<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
		<!--STYLE-->
		<link rel = "stylesheet" href = "css/index.css">
		<!--SCRIPT-->
	</head>
	<body>
		<!--BANNER-->
		<section id = "banner">
			<!--NAVBAR-->
			<!--BANNER-->
			<div id = "bannerimg">
				Test
			</div>
		</section>
		<!--OVER ONS-->
		<!--VEELGESTELDE VRAGEN-->
		<!--CONTACT-->
	</body>
</html>

Тогда почему бы вам не использовать vh?

— 30.10.2018 18:10

поскольку вы используете процентную высоту, вам также необходимо добавить html { height:100%; }

— 30.10.2018 18:17

html css

30.10.2018 18:02

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

452

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы также должны добавить html, таким образом ваша минимальная высота страницы будет 100% vh. тогда вы можете использовать #banner с %

html,
body{
    width: 100%;
    height: 100%;
}

30.10.2018 18:16

Ответ принят как подходящий

Добавьте html в селектор body, у вас должна быть ссылка на высоту для body.

@charset "utf-8";
/* CSS Document */
/*MAIN*/
html, body{
	width: 100%;
	height: 100%;
}
/*BANNER*/
#banner{
	width: 100%;
	height: 100%;
	background-color: black;
}
#bannerimg{
	background-image: url("https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	height: 80%;
}

<!DOCTYPE html>
<html>
	<head>
		<!--ALGEMEEN-->
		<meta charset = "utf-8">
		<title>Homepagina - RC paneel</title>
		<!--FONT-->
		<!--INCLUDE-->
		<link href = "//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel = "stylesheet" type = "text/css" />
		<script src = "//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
		<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
		<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
		<!--STYLE-->
		<link rel = "stylesheet" href = "css/index.css">
		<!--SCRIPT-->
	</head>
	<body>
		<!--BANNER-->
		<section id = "banner">
			<!--NAVBAR-->
			<!--BANNER-->
			<div id = "bannerimg">
				Test
			</div>
		</section>
		<!--OVER ONS-->
		<!--VEELGESTELDE VRAGEN-->
		<!--CONTACT-->
	</body>
</html>

30.10.2018 18:17

Другие вопросы по теме

Размещение HTML-блоков так, чтобы один был меньше другого

React-admin: как я могу исправить эту катастрофу просмотра?

Css- верхний левый сложенный эффект

Переходы Vue.js: анимация высоты при использовании анимации выдвижения

Общий последний ребенок во вложенной структуре div

Почему пустые элементы HTML ведут себя иначе, чем элементы с содержимым?

TypeError: css.eachInside не является функцией в gulp.task

CSS: количество столбцов + преобразование + масштабирование + переход = странное поведение

Как скрыть трехточечную кнопку хромированного видеоплеера в версии 70+

Установка карусели ng-bootstrap на div внутри модального окна ng-bootstrap

CSS - vh работает, а процент - нет

Ответы 2

Другие вопросы по теме

Похожие вопросы