Child Div的底部超出了父Div

Question

我无法找出为什么我的#ContenedorTipoInversionDiv完成了它的父级#SectionInvest。 问题似乎只发生在底部，因为#ContenedorTipoInversion的顶部刚刚在导航栏（我发布的代码之前的div）之后启动

.TipoInversion {	
    height:100%;
    margin:0%10%0%10%;
    display:inline-block;
}

#ContenedorTipoInversion
{
    padding:15% 0% 15% 0%;
    height:100%;
    margin:0;
    width:100%;
    display:inline-block;
}

#SectionInvest {
    background-image: url("../img/Backgrounds/InvestBackground.jpg");
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: 50% 50%;
    max-height: 100%;
    height: 100vh;	
}

<div class="content">		
    <section id = "SectionInvest">
        <div id = "ContenedorTipoInversion">
            <div class = "TipoInversion" id = "BajoRiesgo">Bajo riesgo</div>
            <div class = "TipoInversion" id = "Balanceado">Balanceado</div>
            <div class = "TipoInversion" id = "Agresivo">Agresivo</div>
        </div>			
</div>

Answer 1

您将#ContenedorTipoInvestion的高度设置为100％，将SectionInvest的高度设置为height: 100vh;

.TipoInversion {	
	height:100%;
	margin:0%10%0%10%;
	display:inline-block;
}

#ContenedorTipoInversion
{
	padding:15% 0% 15% 0%;
	height:100%;
	margin:0;
	width:100%;
	display:inline-block;
}

#SectionInvest {
	background-image: url("../img/Backgrounds/InvestBackground.jpg");
	background-size:     cover;
  background-repeat:   no-repeat;
	background-position: 50% 50%;
	max-height: 100%;	
}

<div class="content">		
			<section id = "SectionInvest">
				<div id = "ContenedorTipoInversion">
					<div class = "TipoInversion" id = "BajoRiesgo">Bajo riesgo</div>
					<div class = "TipoInversion" id = "Balanceado">Balanceado</div>
					<div class = "TipoInversion" id = "Agresivo">Agresivo</div>
				</div>			
</div>

Answer 2

只需添加box-sizing: border-box;即可在 height和width测量中包含填充（默认情况下，已添加到高度和宽度）：

（请注意，代码段太小而无法正确显示 - 以完整尺寸打开）

* {
  border: 1px solid grey;
  box-sizing: border-box;
}
.TipoInversion {	
    height:100%;
    margin:0%10%0%10%;
    display:inline-block;
}

#ContenedorTipoInversion
{
    padding:15% 0% 15% 0%;
    height:100%;
    margin:0;
    width:100%;
    display:inline-block;
}

#SectionInvest {
    background-image: url("../img/Backgrounds/InvestBackground.jpg");
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: 50% 50%;
    max-height: 100%;
    height: 100vh;	
}

<div class="content">		
    <section id = "SectionInvest">
        <div id = "ContenedorTipoInversion">
            <div class = "TipoInversion" id = "BajoRiesgo">Bajo riesgo</div>
            <div class = "TipoInversion" id = "Balanceado">Balanceado</div>
            <div class = "TipoInversion" id = "Agresivo">Agresivo</div>
        </div>			
</div>