获取背景拉伸到内容的全高度

我codepen http://codepen.io/leongaban/pen/sBvfL获取背景拉伸到内容的全高度

因此，有一个奇怪的问题，我试图让#portfolio div的背景拉伸到包含以下这些都是缩略图投资组合div内的ul列表。

但是，100％或自动不影响高度。我必须设置一个静态高度，如1000px。获得背景以覆盖拇指。但是我试图不设置静态高度，因为缩略图会变得更长。

也许我一直在编码这个太长，你会如何编码？

HTML

<div id="portfolio"> 

    <div class="portfolio-nav"> 
     <h1>Portfolio</h1> 
    </div> 

     <div id="showcase-holder"> 

      <div id="showcase-div"> 

      <ul id="portfolio-thumbs"> 

       <li> 
        <a href="/portfolio/chipestimate"> 
         <img class="role-thumb" src="http://leongaban.com/images/thumb_chipestimate.jpg" alt="ChipEstimate"/> 
         </a><p>ChipEstimate</p> 

       </li> 

       <li> 
        <a href="/portfolio/shabang" title="Shabang"> 
         <img class="role-thumb" src="http://leongaban.com/images/thumb_shabang.jpg" alt="Shabang"/> 
         </a><p>Shabang</p> 

       </li> 
     </ul> 
    </div> 
</div>

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; 
}

来源

2013-05-17 Leon Gaban

父母通常会扩大到他们的孩子的高度，但不会在情况下，孩子是相对的。

您可以删除位置和浮动来完成扩展。
为了扩大基于定位的孩子的父母尝试溢出：自动;在#portfolio上。这将使#portfolio扩展到其子女的身高。正如你的例子的fork所见。

overflow: auto;实际上会让您的浏览器决定，通常会将其显示为overflow: hidden;。尽管我倾向于使用overflow: auto;来防止滚动条出现问题，因为稍后可能会扩展页面。

来源

2013-05-17 15:02:02 Aquillo

好的答案！谢谢：D –

不客气！ – Aquillo

您已将float添加到您的li元素，这意味着父代不会展开以包含这些元素。

您可以通过添加清除div来解决此问题。

<div style="clear:both;"></div>

在showcase-holder div之后。

来源

2013-05-17 15:03:46 Kami

谢谢，不敢相信我忘了那个嘿嘿 –

将overflow: hidden添加到#showcase-div和#portfolio-thumbs都应该为你做。

http://jsfiddle.net/5SFFP/

来源

2013-05-17 15:05:05 VettelS

谢谢男人，简单的东西出错似乎永远是我的隧道代码案例：/ –

获取背景拉伸到内容的全高度

回答

相关问题