Inner Div Bild CSS

Question

mit folgenden:

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

Ich war mit relativ versuchen und absoluten, sondern der Seite anspricht, kann ich nicht die Höhe des .content

Was die CSS ist ?

Answer 1

Sie können nicht einfach nach Code fragen, auch wenn Sie es nicht versuchen. Überprüfen Sie den Code unten. es könnte hilfreich sein.

.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>