Because div occupies the height: 100% without indicating it

Question

Because div occupies the height: 100% without indicating it

Navigation

#1 by (2 votes)

2

Because the div with class iconmas occupies me in height 100% without saying it, I only indicate padding 0 0.5%

.padre
{
position:relative
}

.ttcategoriax
{
	position: relative;
	width: 100%;
}
.ttcategoriax p
{
	position: relative;
	font-size: 20px;
	background-color: aqua;
	padding: 3%;
	width: 100%;
	display: block
}

.iconmas
{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 15%;
  background-color: rgba(0,0,0,1.00);
	padding:0 0.5%
}

<div class="padre">
	<div class="ttcategoriax"><p>Electronica</p></div>
  <div class="iconmas"></div>
</div>

html5 html css3 css

asked by Orlando Pasaca Rojas 05.03.2018 в 23:52

source

1 answer

Display information of a binary search tree python Call Functions of a class from a different class?

score 2 · Accepted Answer

You are occupying 100% of the height because you have absolute position and you are saying that your position above top is at 0, and the same below bottom , for which the element "tries" to fulfill these two instructions and its upper edge is at the top of the reference container (which has a relative position) and its lower edge at the bottom.

If I remove bottom: 0; , then it does not occupy 100% anymore, to show you that that is the main reason.

.padre {
  position:relative;
  background-color: yellow;
}

.ttcategoriax
{
	position: relative;
	width: 100%;
}
.ttcategoriax p
{
	position: relative;
	font-size: 20px;
	background-color: aqua;
	padding: 3%;
	width: 100%;
	display: block
}

.iconmas {
  position: absolute;
  right: 0;
  top: 0;
	margin: auto;
	width: 15%;
  background-color: rgba(0,0,0,1.00);
	padding:0 0.5%;
  color: white;
}

<div class="padre">
	<div class="ttcategoriax"><p>Electronica</p></div>
  <div class="iconmas">holaaa</div>
</div>