如何将divs高度扩展到底部的页脚 [英] How to extend divs height till the footer at the bottom
问题描述
我在这里遇到麻烦，我要使线性渐变的容器颜色一直到底部与页脚粘连，无论侧边栏的内容是否大于该容器的颜色，如果该侧边栏的内容大于该容器的颜色，反之亦然反之亦然.边栏没有背景色，该颜色来自父包装程序Div.同样，在内容结束后，我需要将页脚粘贴在底部，以免在此处显示空白.
I have troubles here I want that container color with linear gradient to go till the bottom to stick with the footer no matter does it have so much content for that Div container or not IF the sidebar has content more than the container and vice versa. Sidebar has no background color that color is from the parent wrapper Div. Also the footer I need to be sticked at the bottom after the content ends not to display empty spaces there.
这是我的代码:
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>
更新:(媒体屏幕查询)
UPDATE: (Media screen query)
@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;
}
}
推荐答案
对于此类问题，我更喜欢将 calc() CSS函数与 vh的大小设置属性一起使用，代表视口高度.
For problems such as this, I prefer to use the calc() CSS functions along with the sizing attribute of vh, which stands for viewport height.
例如，为您的内容设置以下样式:
For example, give your content the style of:
height: calc(100vh - 300px);
100vh 表示视口(浏览器窗口)的100％高度.
The 100vh means 100% height of the viewport (browser window).
相应地更改 300px ，以便它是标题的确切高度.如果您在开发人员工具中实时进行此操作，则可以将其完美匹配.
Change the 300px accordingly so that it is the exact height of your header. If you do this live within developer tools, you'll be able to match it up perfectly.
这篇关于如何将divs高度扩展到底部的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
