I am facing an issue with a linear-gradient background image that does not extend to cover the entire content height.
I have experimented with different solutions like using min-height: 100% and adjusting the positioning of the html and about-body divs, but I haven't been successful. How can I make sure the html height accommodates all the content?
html {
width: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll hidden;
background-image: linear-gradient(#d580ff, #ffcc99);
}
/* Nav bar */
#pageNavBar { ... }
#header-text { ... }
#nav-links { ... }
.nav-link { ... }
/* About */
#about-body { ... }
#about-body-header { ... }
#aboutImg { ... }
#aboutTxt { ... }<body>
<!-- Navigation -->
<div id="nav-links">
...
</div>
<!-- Main page body below nav bars -->
<div id="about-body">
<div id="about-body-header">About Me</div>
<img src="/images/image.png" id="aboutImg" />
<p id="aboutTxt">
...
<br /><br />
...
<br /><br />
</p>
</div>
</body>