Question

拥有以下内容：

<div class="big-container">
    <div class="header">many things here that must be fixed on top of the page</div>

    <div class="content">
        <img src="image"/> <!--Must expand the content div to the size of the image -->
        <div class="footer"> Must be inside the image but at the bottom</div>
    </div>
</div>

<!-- .content and .header must be at the same top, .content is much higher than header-->

我尝试使用相对和绝对但页面响应，我无法设置.content的高度

什么是CSS？

Answer 1

你不能只是在没有尝试的情况下询问代码。检查以下代码。它可能会有所帮助。

.header{
background:red;
  width:100%;
  position:fixed;
  top:0;
}

.content{
margin-top: 30px;
position: relative;
min-width: 300px;
max-width: 500px;
}
.content img{
position: relative;
height: 300px;
width: 100%;
}
.content .footer{
background: gray;
position: absolute;
width: 100%;
bottom: 0px;
}

<div class="big-container">
    <div class="header">many things here that must be fixed on top of the page</div>

    <div class="content">
        <img src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg"/> <!--Must expand the content div to the size of the image -->
        <div class="footer"> Must be inside the image but at the bottom</div>
    </div>
</div>

内部Div与图像CSS

1 个答案: