I'm making myself a portfolio website and am having trouble with the body scrolling underneath the header and footer when the window height is reduced.
I believe the problem is with multiple parts of my CSS, the header and footer as well as possibly either the whole body or specific parts of it like the background image itself. Before the body started scrolling underneath the footer I was having problems with the footer not going all the way to the bottom of the page and the background image sticking out from the bottom. Adjusting the footer p padding seemed to fix it but then this happened.
* {
margin: 0;
}
html,
body {
height: 100%;
}
html {
background: url(Photo-by-Artem-Podrez-from-Pexels.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
margin-block-start: 0em;
margin-block-end: 0em;
}
#header {
background-color: #A97938;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
#name {
color: #335067;
font-size: 2em;
padding-top: 10px;
padding-left: 10px;
}
#self {
display: block;
padding-top: 95px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div#nav-bar {
height: 60px;
display: flex;
justify-content: space-between;
}
#name {
max-height: 60px;
}
div#links {
display: flex;
justify-content: flex-start;
}
div#links>a {
padding: 20px;
font-size: 20px;
}
#about-me-text {
display: block;
color: #D4A66A;
flex-wrap: wrap;
margin-left: 50px;
margin-right: 50px;
position: relative;
}
#footer {
background-color: #A97938;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.footer p {
padding-bottom: 0;
}!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="homepage_redo_style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfr0j BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
</head>
<body id="home" >
<!-- nav bar -->
<div id="header">
<div id="nav-bar" >
<div id="name">My Name</div>
<div id="links">
<a href="projects_redo.html">Projects</a>
<a href="resume (2).docx" target="_blank">Resume</a>
<a href id="contact-link">Contact</a>
</div>
</div>
</div>
<div id="bg">
<div >
<img id="self" src="WIN_20210912_15_35_13_Pro.jpg" width="184" height="262">
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
</div>
</div>
<div id="footer">
<div >
<div id="contact">
<p >Contact Info:</p>
<p >
Email:
<a href="mailto:my email address">my email address</a>
<br> Phone:
<a href="tel:my phone number">my phone number</a>
</p>
</div>
<div id="social">
<a href="linkedin profile link" target="_blank">
<img src="linkedin-social.png" alt>
</a>
</div>
<div>
<p >© 2022 by My Name
<br> All rights reserved.
</p>
</div>
</div>
</div>
<div id="contact-modal" style="display:
block;">
<div >
<h1>Contact Info:</h1>
<br>
<p>
Feel free to contact me!
<br> Email me at
<a href="mailto:my email address">my email
address</a>
<br> or call at:
<a href="tel:my phone number">my phone
number</a>
<br>
</p>
<img src="close_icon.jpg" alt id="close-contact-modal">
</div>
</div>
<script src="homepage.js"></script>
</body>
</html>CodePudding user response：
Nest the content in a wrapper then use overflow-y: scroll; on that div.
I added a bunch more text so you can see the demonstration.
* {
margin: 0;
}
html,
body {
height: 100%;
overflow-y: hidden;
}
html {
background: url(Photo-by-Artem-Podrez-from-Pexels.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
margin-block-start: 0em;
margin-block-end: 0em;
}
#wrapper {
height: 100%;
overflow-y: scroll;
}
#header {
background-color: #A97938;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
#name {
color: #335067;
font-size: 2em;
padding-top: 10px;
padding-left: 10px;
}
#self {
display: block;
padding-top: 95px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div#nav-bar {
height: 60px;
display: flex;
justify-content: space-between;
}
#name {
max-height: 60px;
}
div#links {
display: flex;
justify-content: flex-start;
}
div#links>a {
padding: 20px;
font-size: 20px;
}
#about-me-text {
display: block;
color: #D4A66A;
flex-wrap: wrap;
margin-left: 50px;
margin-right: 50px;
position: relative;
}
#footer {
background-color: #A97938;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.footer p {
padding-bottom: 0;
}!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="homepage_redo_style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfr0j BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
</head>
<body id="home" >
<!-- nav bar -->
<div id="header">
<div id="nav-bar" >
<div id="name">Kyle Williams</div>
<div id="links">
<a href="projects_redo.html">Projects</a>
<a href="resume (2).docx" target="_blank">Resume</a>
<a href id="contact-link">Contact</a>
</div>
</div>
</div>
<div id="wrapper">
<div id="bg">
<div >
<img id="self" src="WIN_20210912_15_35_13_Pro.jpg" width="184" height="262">
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p><p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p><p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
</div>
</div>
</div>
<div id="footer">
<div >
<div id="contact">
<p >Contact Info:</p>
<p >
Email:
<a href="mailto:[email protected]">[email protected]</a>
<br> Phone:
<a href="tel:2168152705">(216) 815-2705</a>
</p>
</div>
<div id="social">
<a href="linkedin.com/in/kyle-williams-b5bb60162" target="_blank">
<img src="linkedin-social.png" alt>
</a>
</div>
<div>
<p >© 2022 by Kyle Williams
<br> All rights reserved.
</p>
</div>
</div>
</div>
<div id="contact-modal" style="display: block;">
<div >
<h1>Contact Info:</h1>
<br>
<p>
Feel free to contact me!
<br> Email me at
<a href="mailto:[email protected]">[email protected]</a>
<br> or call at:
<a href="tel:2168152705">(216) 815-2705</a>
<br>
</p>
<img src="close_icon.jpg" alt id="close-contact-modal">
</div>
</div>
<script src="homepage.js"></script>
</body>
</html>CodePudding user response：
your question and problem is a a lil Vague. Do you want your body alone to be scrollable while the header and footer are fixed OR you want the header alone to be fixed while other's scroll nomally?