我的父div具有可变高度,具体取决于窗口的大小。
我有一个#image-container
和一个#second-container
,我试图在我的父div中。我的#second-container
也是一个可变高度,具体取决于屏幕大小,我试图将其粘贴到父容器的底部。
现在我正在通过javascript完成此操作,但我想知道是否还有使用纯CSS执行此操作。
function resize() {
var header_height = $("#header").height(),
second_container = $("#second-container").height(),
image_container = $("#image-container").height();
document.getElementById('image-container').style.height = header_height - second_container +'px';
}
resize();
$( window ).resize(function() { resize(); });
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
* { margin:0; padding:0 }
#header {
background-color:#f0f0f0;
height:100vh;
}
#image-container {
background-image:url('https://images.unsplash.com/photo-1428509774491-cfac96e12253');
background-size:cover;
background-position:center;
height:50vh;
}
#second-container {
font-size:0;
}
.grid {
vertical-align:top;
display:inline-block;
width:25%;
}
.box {
padding-bottom:56.25%;
border:1px solid #232323;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="image-container"></div>
<div id="second-container">
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
</div>
</div>
答案 0 :(得分:0)
解决方案是使标题的位置相对,容器的位置绝对并固定在底部。这可以通过在css中添加以下内容来实现:
CSS:
#header{
position: absolute;
}
#second-container{
position:absolute;
bottom:0;
}
编辑:
如果你想在没有绝对定位的情况下这样做,解决方案就是使图像成为对象而不是背景。这是一个显示这个的JSFiddle。你必须修改一些高度/宽度,但这应该可以解决你的问题。
HTML:
<div id="header">
<div id="second-container">
<div class="image"><img src="https://images.unsplash.com/photo-1428509774491-cfac96e12253"></div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
</div>
</div>
CSS:
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0
}
#header {
background-color: #f0f0f0;
height: 100vh;
/* position: relative; */
/* background-image: url('https://images.unsplash.com/photo-1428509774491-cfac96e12253'); */
/* background-size: cover; */
/* background-position: center; */
}
img{
height:100vh;
object-size:contain;
}
#second-container {
font-size: 0;
position: relative;
left: 0;
bottom: 0px;
width: 100%;
z-index: 100
}
.grid {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: #ddd;
margin:0;
}
.box {
box-shadow: 0 0 0 1px #232323 inset;
height: 80px;
}