我该如何使我的图像位于任何屏幕尺寸的底部，并且我还希望我的图像位于人类的脚下，以便您必须向下滚动才能看到现在是这样的我希望它在所有屏幕尺寸的高度上都是这样到目前为止我的项目代码。我不介意是否也需要使用其他语言。.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 回答
桃花长相依
TA贡献1860条经验 获得超8个赞
如果您指示您的图片而不是测试图片（带有鸽子），您将得到所需的结果。首先，您必须将所有内容包装在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>
添加回答
举报
0/150
提交
取消