Greetings! This is my debut question on Stack Overflow, and I am hopeful that someone can provide me with some guidance.
I have encountered a hiccup while working on my webpage using the Skeleton framework. The issue at hand is setting the "height" to 100%. I aim to keep my footer fixed at the bottom so that the remainder of the page extends to fill the entire window. How can I achieve this?
Below is the code snippet:
html {
font-size: 62.5%;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: 'Lato', sans-serif;
color: #FFD6ED;
background-color: #1D003E;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
The HTML structure is fairly standard:
<html>
<body>
<header>
<div class="container">
<div class="rows">
<div class="twelve columns">
Content
</div>
</div>
</div>
</header>
</body>
</html>
Despite trying various methods, nothing seems to be effective. Even setting height: 100vh did not yield any positive results. I have scoured through multiple threads here in search of solutions, yet none of them have made a difference.