绝对定位块的百分比高度

这是一个受好奇心而非实际问题驱动的问题。我试图更好地理解CSS。绝对定位块的百分比高度

百分比高度（和宽度）应该是相对于包含块（see here）。

绝对定位块的包含块是“定位”的最近祖先（即绝对，相对或固定 - see here）。

，所以我期望在这个例子中，内div来跨越整个可用高度：

<div class="full-height"> 

    <div> 
    <div id="main-block"> 
    x 
    </div> 
    </div> 

</div> 

html, body, .full-height { 
    height: 100%; 
    position: relative; 
}

这个CSS：

#main-block { 
    height: 100%; 
    background-color: red; 
}

或只采取this fiddle。

那么这里发生了什么？

来源

2017-08-13 John

你还没有绝对定位你的主要块。做到这一点，它将采取全高。

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
    position:absolute 
 
}

<div class="full-height"> 
 

 
     <div> 
 
     <div id="main-block"> 
 
     x 
 
     </div> 
 
     </div> 
 

 
    </div>

来源

2017-08-13 23:25:12 Alohci

嗯，这很尴尬... – John

问题在于你有一个额外的<div>，它是#main-block的父级，它没有设置高度。考虑到你没有指定100%的高度为这个元素，它只使用默认高度高度。对于<div>，这是0px。

#main-block试图占用此额外<div>（而不是其父母）的高度100%。考虑到#main-block包含内容（x），它会自动扩展以允许显示内容。

删除此额外<div>展示一整页的红色背景，正如预期：

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div class="full-height"> 
 
    <div id="main-block"> 
 
    x 
 
    </div> 
 
</div>

相反，保持这个额外的父<div>并给它的100%将高度也给你一个全高的红色背景。请注意，这只会给你尽可能多的宽度作为#main-block内容本身;如果你希望它是全宽，你需要在除指定width到height：

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.full-height > div { 
 
    position: absolute; 
 
    height: 100%; 
 
}

<div class="full-height"> 
 
    <div> 
 
    <div id="main-block"> 
 
     x 
 
    </div> 
 
    </div> 
 
</div>

而且也注意到了<div>的默认位置static ，而不是absolute。

希望这会有所帮助！ :)

来源

2017-08-13 23:17:14

绝对定位块的百分比高度

回答

相关问题