[英]Getting background to stretch to full height of contents
我的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;
}
父母通常會擴大到孩子的高度,但是如果孩子是親戚則不會。
overflow: auto;
實際上將讓您的瀏覽器做出決定,通常這會導致overflow: hidden;
。 雖然我傾向於使用overflow: auto;
以防止滾動條出現問題,因為以后頁面可能會擴展。
您已經在li
元素中添加了float
,這意味着父元素將不會擴展為包含這些元素。
您可以通過添加清除div
來解決此問題。
<div style="clear:both;"></div>
在showcase-holder
之后
添加overflow: hidden
#showcase-div
和#portfolio-thumbs
都應該為您做到這一點。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.