gpt4 book ai didi

html - Css 不是页面的全高

转载 作者:行者123 更新时间:2023-11-28 07:01:10 25 4
gpt4 key购买 nike

我这里有这张图片,只是一个简单的 Bootstrap 网站。

image of website

这是它的代码。如您所见,我已经厌倦了 100% 的高度,但它不起作用,我希望黑色背景是屏幕的全高。

<div class="col-md-8" style="background-color:#333333; height:100%">
<p style="color:white; padding-top:10%; font-size:80px" align="right">Some</p>
</div>
<div class="col-md-4" style="background-color:#ffffff;">
<p style="color:#333; padding-top:20%; font-size:80px">Text</p>

</div>

最佳答案

为了使百分比高度起作用,需要在父元素上设置一个高度。如果父级的高度是一个百分比,那么它将要求它的父级也设置一个高度。这就是为什么简单地应用 html, body { height: 100%; } 的原因可能/不工作——你的元素可能不是 <body> 的子元素从而打破链条。

例如,不起作用,链坏了:

<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="no-height-set">
<div class="no-height-set">
<div class="percentage-height-set"></div>
</div>
</div>
</body>
</html>

有效,链是完整的:

<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="percentage-height-set"></div>
</body>
</html>

由于百分比高度需要在其父元素上设置高度,因此数学可能如下所示:

[parent height] * [percentage height of child] = [pixel height of child]

你在做什么:

?? * .05 = ??

在父级上设置高度:

500px * .05 = 25px

关于html - Css 不是页面的全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33222037/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com