html - CSS 全高响应式网站

Question

我正在尝试创建一个全高响应式网站，该网站具有固定高度的粘性页脚且无滚动。到目前为止我有这个......

body, html {
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}

.content {
  text-align:center;
  background:wheat;
  height:calc(100vh - 100px);
 }
 
 .image_container img {
   max-width:100%;
   height:auto;
 }

footer {
  position:fixed;
  bottom:0;
  height:100px;
  background:teal;
  width:100%;
  color:white;
  text-align:center;
}

<div class="container">

<div class="content">
    This is the content
    <div class="image_container">
      <img src="https://dummyimage.com/500x1000/500/fff">
    </div>
</div>
<footer>This Is The Footer</footer>

</div>

图像导致所有内容滚动，我怎样才能使这个图像高度响应？

Answer 1

这可能有帮助

body, html {
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}

.content {
  text-align:center;
  background:wheat;
  height:calc(100vh - 100px);
 }
 
 .image_container img {
   max-width:100%;
   
 }
 .image_container{
 height:100%;
 }

footer {
  position:fixed;
  bottom:0;
  height:100px;
  background:teal;
  width:100%;
  color:white;
  text-align:center;
}
img{
max-height:100%;
}

<div class="container">

<div class="content">
    This is the content
    <div class="image_container">
      <img src="https://dummyimage.com/500x1000/500/fff">
    </div>
</div>

<footer>This Is The Footer</footer>
</div>