CODEWITHSUNDEEP
htmlcss
Voakie
Voakie

Reputation: 169

Scrolling inside a div not working

Maybe I'm missing something quite simply, but I can't figure out what. I want the content div to be scrollable inside the main div. (So that I can fix height etc. with the main div). Have tryed many things, all didn't work.

Here is the Codepen. Colors are just for demonstration ;).

Here is the main part you need to worry about (I guess):

.main {
position: fixed;
z-index: -1;
right: 30px;
left: 30px;
bottom: 30px;
top: 30px;
display: inline-block;
background-color: white;
}

.content {
position: static;
margin-top: 9em;
}

Upvotes: 0

Views: 118

Answers (2)

ArchLicher
ArchLicher

Reputation: 141

This is the cleanest:

.scroll {
  max-height: 340px;
  overflow-y: scroll;
}

Upvotes: 0

j08691
j08691

Reputation: 207861

Add overflow:scroll to .main

* {
  margin: 0 auto;
}
body {
  background-color: beige
}
.wrapper {
  position: fixed;
  background-color: white;
  display: inline-block;
  margin: auto;
  top: 30px;
  left: 30px;
  right: 30px;
}
.header {
  background-color: #3c3c3c;
  margin-bottom: 1em;
  position: fixed;
  right: 30px;
  left: 30px;
}
header {
  text-align: center;
  font-family: Verdana;
  color: White;
  padding: 10px;
}
header h1 {
  font-size: 40px;
}
.hr {
  height: 2px;
  background-color: green;
}
nav {
  text-align: center;
  margin: .1em 0;
}
nav a {
  display: inline-block;
  text-decoration: none;
  font-size: 20px;
  padding: 10px;
  font-family: Arial;
  color: white;
  text-transform: uppercase;
  transition: all .3s;
}
nav a:hover {
  background-color: green;
}
nav #active {
  border-bottom: 2px solid white
}
.main {
  position: fixed;
  z-index: -1;
  right: 30px;
  left: 30px;
  bottom: 30px;
  top: 30px;
  display: inline-block;
  background-color: white;
  overflow: scroll;
}
.content {
  position: static;
  margin-top: 9em;
}
<div class="wrapper">

  <!-- HEADER, SAME ON ANY SITE -->
  <div class="header">
    <header>
      <h1>Oblivion</h1>
      <p>Headline</p>
    </header>
    <div class="hr"></div>
    <nav>
      <!-- Codepen.io cant handle links, so i disabled them -->
      <a href="#" id="active">home</a>
      <a href="#">info</a>
      <a href="#">roster</a>
      <a href="#">more...</a>
    </nav>
    <div class="hr"></div>
  </div>
  <!-- HEADER END -->

  <div class="main">
    <div class="content">

      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>
      <p>TEST 123</p>

    </div>
  </div>

</div>

Upvotes: 2

Related Questions