时间戳

首页 > 解决方案 > 将内容垂直调整到视口

html - 将内容垂直调整到视口

问题描述

我正在创建一个页面来显示照片的放大视图。我希望页面在顶部显示页眉，在底部显示页脚，并且照片的图像填充页眉和页脚之间的所有空间。照片有不同的尺寸，可能有横向或纵向。我没有困难调整视口的宽度。如果页面只包含图像而没有其他内容，我这样做没有问题。尽管进行了搜索、阅读和反复试验，但我无法辨别如何垂直调整内容的大小以满足该准则。例如：

<header>
    <h1>Some header stuff</h1>
    <p>Such as a navigation bar at the top of the viewport.</p>
</header>
<main>
    <h1>Image</h1>
    <p>An image that should fill up the space in between</p>
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
</main>
<footer>
    <h1>Some footer stuff</h1>
    <p>Such as a logo, link to privacy page etc.</p>
</footer>

也许这是不可能的。有任何想法吗？

标签： htmlcssviewportimage-resizing

解决方案

header{
height:10vh;
}
footer{
height:10vh;
}
main{
height:65vh;
background:url("https://www.bing.com/th?id=ABT63B35E950543A69BB040AEFA5BFCA186A43A5798E5E9B96844F4CE0ED7176910&w=608&h=200&c=2&rs=1&pid=SANGAM") no-repeat center center fixed;
background-size:cover;
}
<header>
    <h1>Some header stuff</h1>
    <p>Such as a navigation bar at the top of the viewport.</p>
</header>
<main>
    
</main>
<footer>
    <h1>Some footer stuff</h1>
    <p>Such as a logo, link to privacy page etc.</p>
</footer>

推荐阅读