How do I make the height of an element adapt to a%?

Question

How do I make the height of an element adapt to a%?

Navigation

#1 by (1 votes)

0

My question is how could I make an element (specifically a <div> ) adapt to x% of the height of the screen, so that regardless of the equipment where it is seen has the same effect, something like what about the next image

The code I thought (which did not have the effect I thought) was this:

html, body{
	background-color: #1C1C1C;
}

div{
	color: #FF00FF;
	border-color: red;
	border-style: solid;
	height: 800%;
	width: 60%:;
}

<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="style.css">
			<title></title>
		</head>
		<body>
			<div>
				<p>
                   <i>contenido</i>
				</p>
			</div>
		</body>
	</html>

Thanks

html5 html css3 css web

asked by Jet1224 24.01.2018 в 01:32

source

1 answer

Problems with database and array MIME type of programs written in C (.c or c ++) language in PHP

score 1 · Accepted Answer

For this case there is something called Viewport Units that are relative to the screen where they are running, among the most recognized are the measures vw (viewport width) and vh (viewport height) which in this case replace the measures % (percentage).

Viewport units documentation

body {
  background-color: #eee;
}

div {
  background-color: #fff;
  border: 1px solid red;
  height: 80vh;
  width: 60vw;
  margin: 10vh auto;
  padding: 1rem;
  border-radius: .5rem;
  box-sizing: border-box;
}

<div>Flotante</div>