HTML

Question

我的身体元素上有渐变。我设置了min-height: 100%;，因此渐变始终填充视口。到目前为止这是有效的。

但我只想为渐变而不是整页设置min-height: 1000px;。

解决方案是在:before伪元素上使用渐变并将overflow: hidden;添加到父元素中 - 但这不是完美的。

有什么好的解决方案吗？

Answer 1

我认为渐变可以在带有“min-height”属性的html标签上 https://jsfiddle.net/bearwolf/098hg12g/

html{
    border:1px solid #000;
    min-height:1000px;
    background: linear-gradient(to top, #fefcea, #f1da36);
}

body{
    border:1px solid red;
}

div{
    height:30px;
}

Answer 2

在正文中添加“wrapper”div，并为该div赋予渐变min-height: 1000px

Answer 3

View DEMO here

HTML

<body>
 <div class="wrapper">All text goes here</div>
</body>

CSS

   *{
        padding:0;
        margin:0;   
        box-sizing:border-box;  
    }
     body{          
        display:block;
        position:relative;                              
        text-align:center;          
    }    
    body:before{
        content: "";
        background:linear-gradient(to bottom, #ff6000, #ffffff);
        min-height:1000px; 
        position:absolute;
        overflow:hidden;            
        width:100%;
        height:100%;
        top:0;
        border:0;
        right:0;
        left:0;
    }  
    .wrapper{
        height:500px;
        line-height:500px;
        color:#000000;
        font-size:20px;
        text-align:center;
        display:inline-block;                       
        border:1px solid #000000;
        padding:30px;
        width:500px;
        margin:50px auto;           
        background-color:#fff;
        position:relative;
        vertical-align:middle;                  
    }

渐变背景最小高度

3 个答案:

HTML

CSS