如何将图片移动到底部？
我该如何使我的图像位于任何屏幕尺寸的底部，并且我还希望我的图像位于人类的脚下，以便您必须向下滚动才能看到
现在是这样的
我希望它在所有屏幕尺寸的高度上都是这样
到目前为止我的项目代码。我不介意是否也需要使用其他语言。
.navigation,
.activeBtn {
text-decoration: none;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 2vh;
margin-left: 20px;
font-weight: bold;
}
.activeBtn {
background-color: #e0e0e0;
padding: 15px;
border-radius: 25px;
}
.Lgo {
float: right;
clear: right;
height: auto;
margin-top: -70px;
width: 300px;
padding-right: 30px;
padding-top: 10px;
}
.seperationLine {
border: none;
height: 1px;
margin-top: 50px;
background-color: black;
}
nav {
margin-top: 50px;
margin-left: 50px;
width: 800px;
}
body {
background-color: lightblue;
/* for demonstrating purposes */
}
.footerText {
background-color: rgb(24, 24, 192);
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
<header>
<nav>
<a href="theCompany.html" class="activeBtn" class="navigation">The company</a>
<a href="services.html" class="navigation">Services</a>
<a href="referenceProjects.html" class="navigation">Reference project</a>
<a href="background.html" class="navigation">Our background</a>
<a href="contactForm.html" class="navigation">Contact us</a>
</nav>
<a href="theCompany.html" class="lgoLink">
<img class="Lgo" src="../images/sapsamaLogo.jpeg" alt="Logo">
</a>
<hr class="seperationLine">
</header>
<div class="information">
<img src="../images/hans.png" class="hansTransparent" alt="hans">
</div>
<footer>
<p class="footerText">
© Tim Fredriksson 2020
</p>
</footer>
至尊宝的传说1回答
-
桃花长相依
如果您指示您的图片而不是测试图片（带有鸽子），您将得到所需的结果。首先，您必须将所有内容包装在maindiv 中（没错）。接下来，设置height: calc (100vh - 128px)类的information，其中128px是 的高度header。并为图片集margin-top: auto。有必要吗？body { background-color: lightblue; /* for demonstrating purposes */ box-sizing: border-box; margin: 0; padding: 0;}.main { display: flex; flex-direction: column;}header {}.navigation, .activeBtn {text-decoration: none;color: black;font-family: Arial, Helvetica, sans-serif;font-size: 2vh;margin-left: 20px;font-weight: bold;}.activeBtn {background-color: #e0e0e0;padding: 15px;border-radius: 25px;}.Lgo {float: right;clear: right;height: auto;margin-top: -70px;width: 300px;padding-right: 30px;padding-top: 10px;}.seperationLine {border: none;height: 1px;margin-top: 50px;background-color: black;}nav {margin-top: 50px;margin-left: 50px;width: 800px;}.information { display: flex; flex: 1 0 auto; height: calc(100vh - 128px);}.information img { width: 300px; margin-top: auto;}footer { flex: 0 0 auto;}.footerText {background-color: rgb(24, 24, 192);color: white;font-family: Verdana, Geneva, Tahoma, sans-serif;width: 100%;text-align: center;padding-top: 20px;padding-bottom: 20px;}<body><div class="main"><header> <nav> <a href="theCompany.html" class="activeBtn" class="navigation">The company</a> <a href="services.html" class="navigation">Services</a> <a href="referenceProjects.html" class="navigation">Reference project</a> <a href="background.html" class="navigation">Our background</a> <a href="contactForm.html" class="navigation">Contact us</a> </nav> <a href="theCompany.html" class="lgoLink"> <img class="Lgo" src="../images/sapsamaLogo.jpeg" alt="Logo"> </a> <hr class="seperationLine"></header><div class="information"> <img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" class="hansTransparent" alt="hans"></div><footer> <p class="footerText"> © Tim Fredriksson 2020 </p></footer></div><body>
随时随地看视频慕课网APP
相关分类
JavaScript