Question

我在这里遇到麻烦我希望那个带有线性渐变的容器颜色直到底部粘住页脚，无论它是否有如此多的内容容纳Div容器或者如果侧边栏的内容多于容器和副容器反之亦然。补充工具栏没有背景颜色，颜色来自父包装器Div。在内容结束后，我需要在底部粘贴页脚，以便在那里显示空白区域。

enter image description here

以下是我的代码：

CSS：

#pjesa-kryesore{ /*main wrapper */
    display:flex;
    max-width: 98%;
    margin:0px auto;
} 


/* Permbajtja (container) */
#permbajtja{
    flex-grow:1;
    background:-webkit-linear-gradient linear-gradient(#fff,#bdbdbd);
    background:-o-linear-gradient linear-gradient(#fff,#bdbdbd);
    background:-moz-linear-gradient linear-gradient(#fff,#bdbdbd);
    background:linear-gradient(#fff,#bdbdbd);

    font-family: Open Sans;
    padding:30px;

}


/* Sidebar */
#sidebar-majtas{
    width:350px;
    flex-shrink:0;
}

.menu{
    background:-webkit-linear-gradient linear-gradient(#5b91e9,#a0c3fb);
    background:-o-linear-gradient linear-gradient(#5b91e9,#a0c3fb);
    background:-moz-linear-gradient linear-gradient(#5b91e9,#a0c3fb);
    background:linear-gradient(#5b91e9,#a0c3fb);

    border-radius: 15px;
    text-align: center;
    font-family: Open Sans;
    margin: -45px auto 15px auto;
    padding: 20px 5px;
    width: 270px;
}

.menu-btn{
    text-decoration: none;
    color:#fff;
    display: block;
}

.menu-btn:hover{
    color:#555;
}


/* Footeri */
#footer{
    position:absolute;
    left:0px;
    bottom:0px;
}

HTML：

<div id="pjesa-kryesore">
        <div id="sidebar-majtas">
            <div class="menu">
                <a href="index.html" class="menu-btn padding">Ballina
                <br><span style="font-size:12px"> Informacionet ...</span>
                </a>
                <a href="#" class="menu-btn padding">Link 2
                <br><span style="font-size:12px"> Informacionet ...</span></a>
                <a href="#" class="menu-btn padding">Link 3
                <br><span style="font-size:12px"> Informacionet ...</span></a>
            </div>
            </div>    
        <div id="permbajtja">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida, quam non consequat blandit, ligula elit dignissim sapien, et luctus eros arcu et purus. Donec efficitur mi in mi luctus gravida. Suspendisse magna eros, mollis at lobortis sollicitudin, pharetra ac arcu. Cras vitae dignissim nunc. Aliquam eu felis ut neque placerat accumsan vitae at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pellentesque venenatis hendrerit. Sed pretium eleifend lorem nec maximus.

Morbi commodo lectus a nulla varius faucibus. Morbi id turpis sed odio pretium tincidunt. Nullam a elit id turpis commodo interdum at a nunc. Nam imperdiet dictum tortor. Pellentesque eu molestie tortor. Vivamus sit amet dolor posuere, tristique libero id, aliquam dui. Aliquam elit nulla, pellentesque quis magna eu, imperdiet lobortis nibh. Donec et egestas ante, eget porttitor nisi. Integer porttitor luctus justo.
        </div>
    </div>
    <div id="footer">(C) Copyrighr...</div>

更新:(媒体屏幕查询）

@media all and (max-width: 800px) {

    #pjesa-kryesore {
        flex-flow:column;
    }

    /* Make the sidebar take the entire width of the screen */

    #sidebar-majtas {
        width:auto;
    }

}

Answer 1

对于此类问题，我更倾向于使用calc() CSS函数以及vh的大小调整属性，代表viewport height。

例如，为您的内容提供以下样式：

height: calc(100vh - 300px);

100vh表示视口（浏览器窗口）的高度为100％。

相应地更改300px，使其成为标题的确切高度。如果你在开发者工具中实现这一点，你将能够完美地匹配它。

如何将div高度扩展到底部的页脚

1 个答案: