獲取背景拉伸到內容的全高度

我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

謝謝男人，簡單的東西出錯似乎永遠是我的隧道代碼案例：/ –

獲取背景拉伸到內容的全高度

回答

相關問題