Question

我正在尝试使用粘性固定高度页脚创建一个完整的高度响应网站，而不是滚动。到目前为止我有这个......

＆＃13;

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

＆＃13;

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

＆＃13;

图像导致所有内容都滚动，如何才能使图像高度响应？

Answer 1

我最近创建了一个类似的页面，一旦我不得不插入滚动步骤和导航按钮等功能，我找到了fullPage。

尝试fullPage.js - 我认为它具有您需要的所有功能。

Answer 2

这可能有帮助

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 3

使用flex非常简单。

我将.container设置为 flexbox ，将.content设置为动态高度100％，将footer设置为{{1}的固定高度}}

＆＃13;

100px

＆＃13;

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  text-align: center;
  background: wheat;
  height: 100%;
}

.image_container img {
  max-width: 100%;
  height: auto;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  min-height: 100px;
  background: teal;
  width: 100%;
  color: white;
  text-align: center;
}

＆＃13;

Answer 4

你可以像这样添加溢出：隐藏和身高：100％

＆＃13;

body, html {
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}

.content {
  text-align:center;
  background:wheat;
  height:calc(100vh - 100px);
  overflow:hidden;
 }

.image_container {
position:relative;
height:100%;
}
 .image_container img {
   max-width:100%;
   height:100%;
 }

footer {
  position:fixed;
  bottom:0;
  height:100px;
  background:teal;
  width:100%;
  color:white;
  text-align:center;
}

＆＃13;

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

＆＃13;

Answer 5

选择这个

只需给出一个

.image_container{height: 100%;}
.image_container img { max-height: 100%; max-width: 100%;}

你很高兴这种方法保持图像宽高比正如你在样本中看到的那样

像这样

body, html {
  height:100%;
  width:100%;
  padding:0;
  margin:0;
}

.content {
  text-align:center;
  background:wheat;
  height:calc(100vh - 100px);
 }
.image_container{
   height: 100%;
}
 .image_container img {
   max-height: 100%;
   max-width: 100%;
 }

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>

CSS全高度响应网站

5 个答案: