关于height无法设置百分比的问题

最新推荐文章于 2025-06-10 09:18:32 发布

深谷逸风

最新推荐文章于 2025-06-10 09:18:32 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：布局 class

本文链接：https://blog.youkuaiyun.com/qq_22557797/article/details/66969443

css 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在CSS中，当父元素未设定高度时，如何通过设置子元素的padding实现百分比高度的自适应布局。介绍了通过给父元素添加padding和设置子元素position为absolute来解决问题的方法，并分享了一个左右比例自适应布局的实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章不仅仅是关于高度设置百分比的相关知识，还涉及了自适应布局的问题，当然肯定不是全面讲解的，也仅仅是我项目中涉及到时采用的一些小技巧，所以也是难登大雅之堂了，大神就不用看了。免得贻笑大方。

完成之后的效果图如下

示例图片

<!-- 默认html布局 -->
<div class="c-grid">
    <a class="c-grid-item clearfix">
        <div class="c-grid-view-box pull-left">
            <img class="c-grid-view" src="images/demo.jpg" />
        </div>
        <div class="c-grid-info pull-left">
            <h3 class="c-grid-title ellipsis">示例项目</h3>
            <div class="c-grid-introduce">
                示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目示例项目
            </div>
        </div>
    </a>
</div>

众所周知，如果父级元素没有设置高度的时候，子元素如果定义高度为百分比的时候，是不会有任何作用的，这里我们抛开position位absolute和fixed两种情况；至于为什么，后面我会专门谈一谈这方面的问题。

/* css部分 */
*{/* 这样写虽然简单粗暴，但是项目中还是不建议直接这样写，当然根据具体情况而定 */
    margin:0;
    padding:0;
    box-sizing: border-box;/* 重新定义盒模型，不懂的朋友可以百度一下这句话的意思 */
    -webkit-box-sizing: border-box;/* 兼容写法，一般是兼容谷歌浏览器 */
    -moz-box-sizing: border-box;/* 兼容写法，一般是兼容火狐浏览器 */
}
.pull-left{
    float: left !important; 
}
.pull-right{
    float: right !important;
}
.ellipsis{/* 这句话的意思是只显示一行，如果超出了元素的宽度即用...表示 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.c-grid-item{
    position: relative;
    background: #fff;
    display: block;
    width: 100%;
    padding: 2%;
}
.c-grid-item:after{/*清除浮动,当然你可以不必写的这么复杂*/
    content: "";/* 必要值 */
    display: block;/* 必要值但不是固定值 */
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
    clear: both;/* 必要值 */
}
.c-grid-view-box{
    position: relative;
    width: 35%;
    margin-right: -35%;
    height: 0;
    padding-top: 19.6875%;
    background: #ff0000;
}
.c-grid-view{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fafafa;
}
.c-grid-info{
    width:100%;
}
.c-grid-title{
    width: 100%;
}
.c-grid-introduce{
    width: 100%;
}

基本简单的样式就是上面那样了，下面就说一下上面的为什么这么写吧；

我们知道当父级元素不定义高度的时候，子元素定义高度为百分比是没有效果的，但是我们可以通过给父元素加上padding值；

当人这里的padding值要等于你想要的高度，我这里是定义为和宽度的比例是9:16；

如上面c-grid-view-box的样式；width: 35%;padding-top: 19.6875%;为了安全起见，我特意加上了height:0;为什么设置了padding就有了高度呢。

确切的说不是有了高度，而是有了一个padding-top值;因为元素的padding值和margin值都是基于父级元素的宽度的。所以只要通过计算我们就可以的得到相应的值。

那么如何让此元素里面的子元素的值等于此元素所展示出来所占的空间呢？（大家可以思索一下）

这里，此元素一定要设置position:relative;然后此元素的子元素只要设置为position：absolute；width:100%;height:100%;就可以了，如上面c-grid-view的样式；

上面就是如何在父级元素没有设置高度，子元素高度可以设置百分比而进行自适应高度的小技巧了。接下来说一下自适应布局的问题

上面所展示的项目，是一个左右按一定比例的自适应列表布局；当然自适应布局的方法有很多，我所介绍的也仅仅是其中一种，同时也欢迎大家展示自己的方法0.0；

我的项目左边是占了35%；同时向左浮动。然后给一个margin-right：-35%；这里的margin-right的值等于宽度的负值就行了。这样做的目的相当于是此元素不再占35%的位置了。

接下来右边的元素，他的宽度设置为100%；然后给一个padding-left：37%;这里的padding-left值一定要大于或者等于左边宽度的值，如果小于的话会和左边的元素重叠。

当然这样写的样式可能稍显复杂了点，你也可以左边直接给一个宽度。然后右边的元素overflow:hidden；就行了。这样也可以达到右边的宽度自适应布局。将上面的代码改成如下情况

.c-grid-view-box{
    position: relative;
    width: 35%;
    height: 0;
    padding-top: 19.6875%;
    background: #ff0000;
}
.c-grid-info{
    overflow:hidden;
}