how do I make so that my image is on the bottom on any screen size and I also want my to be under the feet of the human so that you must scroll down to see the
now it is like this
and I want it to be like this on all sreen size heights
my code to the project so far. I don’t mind if i need to use some other language too.
.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>Advertisement
Answer
If instead of a test picture (with a dove) you indicate your picture, you will get the desired result. First, you had to wrap everything in main div (that’s right). Next, set the height: calc (100vh - 128px) for the information class, where 128px is the height of the header. And for the picture set margin-top: auto. Was it necessary?
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>