Problem with Sidebar and Content on my page-CodePudding

My sidebar is somehow included when I scroll but whenever I implement position:fixed in my .sidebar css the rest goes to shambles. I would love to hear some workaround for my problems from you guys thanks.

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap');
*{
  box-sizing: inherit;
}
body{
  margin:0;
  min-height: 100vh;
  display: flex;
}
.content{
  background-color: #EFEFEF;
  flex-grow: 1;
  min-height: 100vh;
}
.banner{
  background-image: url("banner.png");
  position: relative;
  min-width: 100%;
  background-position: center;
  background-size: cover;
  height: 7rem;
  box-shadow: inset 0 -20px 50px  black;
  display: flex;

}
.container-content{
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  flex-grow: 1;
}
h3{
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  text-align: center;
  color: white;
  margin-top: 0;
}
h3:hover{
  background-color: #9e9b9b;
  color: #1c1c1c;
  height: 40px;
  margin-top: -17px;
  padding-top: 17px;
}
.sidebar{
  overflow-y: 100%;
  top: 0;
  bottom: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  max-height: 100%;
  min-width: 245px;
  background-color: #262626;
  padding-top: 20px;
}
.sidebarlogo{
  max-width: 245px;
}
.header{
  height: 40px;
  background-color: #5c5b5b;
  padding-top: 17px;
}
.menu a{
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  padding: 15px 6px 15px 16px;
  text-decoration: none;
  font-size: 17px;
  color: white;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  margin: 0;
}
.menu a:hover {
  min-width: 100%;
  Background-color: #1b1b1b;
  text-decoration: underline;
}
.fa-building-columns{
  padding-right: 12px;
  font-size: 39px;
}
.fa-books{
  padding-right: 12px;
  font-size: 39px;
}
.fa-users{
  padding-right: 12px;
  font-size: 32px;
}
.fa-megaphone{
  padding-right: 12px;
  font-size: 36px;
}
.fa-arrow-right-from-bracket{
  padding-right: 12px;
  font-size: 39px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x=icon" href="form.png">
    <link rel="stylesheet" href="adminpagecss.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
    <title>Administrator Page</title>
</head>
<body>
    <aside >
      <span>
        <img  src="sidebarlogo1.jpg">
        <div >
            <h3>Welcome to the Admin Page!</h3>
        </div>
        <br>
        <div >
          <a href="IP.html" ><i ></i>Institution Page</a>

          <a href="#"><i ></i>Courses</a>
          <a href="#"><i ></i>Student Roster</a>
          <a href="#"><i ></i>Announcements</a>

          <br><br><br><br><br><br><br><br><br>

          <a href="labtask 6.html"><i ></i>Log out</a>
        </div>
      </span>
      </aside>

      <main >
          <div ></div>
          <div >
            sadfsdafds
          </div>
      </main>

</body>
</html>

These are my code snippets. I would like to have a fixed sidebar but not have the rest of my contents in my content area going to shambles. If you have some knowledge on how to come up with a solution to my problem please enlighten me.

CodePudding user response：

You could use position:sticky on .sidebar. Also use box-sizing: border-box; instead of box-sizing: inherit; (it saves you form lot of headaches). Like so:

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap');
*{
  box-sizing: border-box;
}
body{
  margin:0;
  min-height: 100vh;
  display: flex;
}
.content{
  background-color: #EFEFEF;
  flex-grow: 1;
  min-height: 100vh;
}
.banner{
  background-image: url("banner.png");
  position: relative;
  min-width: 100%;
  background-position: center;
  background-size: cover;
  height: 7rem;
  box-shadow: inset 0 -20px 50px  black;
  display: flex;

}
.container-content{
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  flex-grow: 1;
}
h3{
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  text-align: center;
  color: white;
  margin-top: 0;
}
h3:hover{
  background-color: #9e9b9b;
  color: #1c1c1c;
  height: 40px;
  margin-top: -17px;
  padding-top: 17px;
}
.sidebar{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  min-width: 245px;
  height:100vh;
  overflow:auto;
  background-color: #262626;
  padding-top: 20px;
  position:sticky;
  top:0;
}
.sidebarlogo{
  max-width: 245px;
}
.header{
  height: 40px;
  background-color: #5c5b5b;
  padding-top: 17px;
}
.menu a{
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  padding: 15px 6px 15px 16px;
  text-decoration: none;
  font-size: 17px;
  color: white;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  margin: 0;
}
.menu a:hover {
  min-width: 100%;
  Background-color: #1b1b1b;
  text-decoration: underline;
}
.fa-building-columns{
  padding-right: 12px;
  font-size: 39px;
}
.fa-books{
  padding-right: 12px;
  font-size: 39px;
}
.fa-users{
  padding-right: 12px;
  font-size: 32px;
}
.fa-megaphone{
  padding-right: 12px;
  font-size: 36px;
}
.fa-arrow-right-from-bracket{
  padding-right: 12px;
  font-size: 39px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x=icon" href="form.png">
    <link rel="stylesheet" href="adminpagecss.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
    <title>Administrator Page</title>
</head>
<body>
    <aside >
      <span>
        <img  src="sidebarlogo1.jpg">
        <div >
            <h3>Welcome to the Admin Page!</h3>
        </div>
        <br>
        <div >
          <a href="IP.html" ><i ></i>Institution Page</a>

          <a href="#"><i ></i>Courses</a>
          <a href="#"><i ></i>Student Roster</a>
          <a href="#"><i ></i>Announcements</a>

          <br><br><br><br><br><br><br><br><br>

          <a href="labtask 6.html"><i ></i>Log out</a>
        </div>
      </span>
      </aside>

      <main >
          <div ></div>
          <div >
            sadfsdafds
          </div>
      </main>

</body>
</html>

CodePudding user response：

yes you can use position:sticky to ok your problem