如何扩展我的底部分区以填充没有滚动条的页面

Posted 2023-03-06

【中文标题】如何扩展我的底部分区以填充没有滚动条的页面

【英文标题】：How do I extend my bottom division to fill the page without scroll bar

【发布时间】：2016-06-11 19:21:32

【问题描述】：

我希望我的徽标适合，然后我的导航适合，然后下面的图片适合页面底部而没有滚动条。如果我调整图像的大小，那么我希望分区内的图片改变大小，而不是上面的其他分区。我该怎么做？

这是我的网站： http://recordspreservation.org/index2.html

【问题讨论】：

所以您基本上希望上部（导航和徽标）始终在屏幕上？

这是一个按照我想要的方式工作的网站。我想让图像填充页面的其余部分并随着页面大小的调整而调整大小：familysearch.org/ark:/61903/…

是的，我希望徽标和导航始终出现，然后照片填充查看端口的剩余部分。我不想要滚动条。

我希望窗口在没有滚动条的情况下显示尽可能多的徽标和导航，并且随着窗口的增长，照片也开始显示而没有滚动条。

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接到的站点无法访问，这个问题将对未来的访问者失去任何价值。发布 Minimal, Complete, and Verifiable example (MCVE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅Something on my web site doesn't work. Can I just paste a link to it? 谢谢！

【参考方案1】：

这样的事情怎么样：

html, body 
  height: 100%;


header 
  height: 30%;
  background-color: #eee;


img 
  display: inline-block;
  height: 70%;

<header>
  <h1>Title</h2>
</header>


<img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>

【讨论】：

有没有办法不指定诸如 70vh 之类的数字，让浏览器用图像填充窗口的其余部分？

我已经更新了我的示例。如果这是你想要的，你应该关闭问题，因为它类似于：***.com/questions/20039141/css-auto-fill-height

Charile，现在请看看我的网站。 iframe 来自谷歌驱动器中的照片。如果我使用小部件在照片周围移动，我看不到照片的底部。我该如何解决？