Having a small issue with my code as I venture back into coding after a long hiatus, resulting in me forgetting some basics. Currently, I am attempting to create a simple HTML layout.
Upon inspecting the page, I noticed that it appears slightly longer than expected, causing a slider to appear which I did not intend unless the content surpasses the expected length (wraps).
The goal is to keep the top fixed at all times, while allowing the footer to adjust based on the content's length or remain fixed at the bottom if the content is minimal.
Expected Outcome:
Current Outcome (without top):
with top :
HTML layout :
<!DOCTYPE html>
<html lang="en">
<head>
@include('layouts.includes.head')
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id ="top">
<div>
<div id = "wrap">
</div>
<footer>
</footer>
</body>
</html>
CSS :
html,body
{
height: 100%;
background-color:red;
}
#top {
height: 50px;
height: auto;
margin: 0 auto -50px;
background-color: yellow;
width:auto;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -50px;
background-color: blue;
width:auto;
}
footer {
height: 50px;
background-color: black;
}