综合技术

Getting background to stretch to full height of contents

微信扫一扫,分享到朋友圈

Getting background to stretch to full height of contents
0

My codepen http://codepen.io/leongaban/pen/sBvfL

So having a strange issue, I’m trying to get the background of the #portfolio
div to stretch to contain the thumbnails below which are in an ul list inside of the portfolio div.

However 100% or auto doesn’t affect the height. I have to set a static height, like 1000px. To get the background to cover the thumbs. However I’m trying to not set a static height since the thumbnails will get longer.

Perhaps I’ve been coding this too long, how would you code this?

HTML

Portfolio

  • ChipEstimate

    ChipEstimate

  • Shabang

    Shabang

CSS

body {
    background: brown;
}

#portfolio {
    position: relative;
    width: 100%;
    height: 50%;
    background: #fff;
    border-top: 2px solid #ccc;
    z-index: 1;
}

#portfolio ul { list-style: none; }

.portfolio-nav { margin: 0 0 20px 0; }

.portfolio-nav h1 {
    padding: 30px 0 10px 0;
    text-align: center;
    font-size: 2.5em;
    font-weight: 700;
    color: #d74927;
    text-shadow: 1px 1px #ccc;
}

#showcase-holder {
    position: relative;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    border-bottom: 2px solid #ccc;
}

#portfolio-thumbs {
    position: relative;
    float: left;
    list-style-type: none;
    margin: 0 0 40px 0;
    padding: 0 0 0 5%;
    width: 100%;
    height: 100%;
}

#portfolio-thumbs li {
    position: relative;
    float: left;
    width: 20%;
    margin: 1%;
    text-align: center;
    padding: 5px 5px 15px 5px;
    background-size: 100% auto;
    overflow: hidden;
    background: white;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -ms-transition: background .3s;
    transition: background .3s;
}

#portfolio-thumbs li:hover {
    color: #fff;
    background: #d74927;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}

#portfolio-thumbs li a {
    color: #333;
    text-decoration: none;
}

#portfolio-thumbs li p {
    padding: 10px 0 0 0;
}

#portfolio-thumbs li img.role-thumb {
    width: 95%;
    min-width: 170px;
    padding-top: 5px;
}

Problem courtesy of: Leon Gaban

Solution

Parents will normally expand to the height of their children, though won’t in case the children are relative.

  • You can remove positions and floats to accomplish expanding.
  • In order to expand a parentdiv based on positioned children try overflow: auto; on #portfolio. This will make #portfolio expand to the height of its children. As seen on this fork
    of your example.

overflow: auto;
will actually let your browser decide, which normally renders this to overflow: hidden;
. Though I tend to use overflow: auto;
to prevent issues with scrollbars as the page possibly expands later on.

Solution courtesy of: Aquillo

Discussion

You have added float
to your li
elements, which means that the parent will not expand to contain these elements.

You can work around this by adding a clearing div
.

after the showcase-holder
div.

Discussion courtesy of: Kami

Adding overflow: hidden
to both #showcase-div
and #portfolio-thumbs
should do it for you.

http://jsfiddle.net/5SFFP/

Discussion courtesy of: VettelS

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...


CSS3 Recipes

9月朋友圈十大谣言:《人民日报》不让用微波炉?

上一篇

[Java] 蓝桥杯ALGO-61 算法训练 奇偶判断

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Getting background to stretch to full height of contents

长按储存图像,分享给朋友