Search code examples
htmlcssheightoverflow

DIV Element to have y-scroll but not stretch beyond 100% height of page

I have a site I've started drafting but whilst my blocks are stretching only to 100% height of the browser for some reason the div containing the main content is going further down the page depending on the length of the content, despite including a scroll option.

What I'd like is the site to be max 100% height of the browser window, with a scroll bar in the div instead. I can't see where I'm going wrong.

I've tried adding height: 100% in a few different places, and attempted using max-height but to no avail. I had a browse on stackexchange but couldn't find an answer that worked for me unfortunately.

If anyone can help that would be great!

CSS:

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans');
* {
  margin: 0;
  padding: 0; }

html, body {
  height: 100%;
  margin: 0;
  background: #424874;
}

body {
  color: #33204a;
  font-family: 'Special Elite', sans-serif;
    margin: 0px;
    padding: 0px;
}

h1 {
      font-family: 'Special Elite';
        color: #FFF; 
        padding-top: 10px;
}

p {
    color: #C9CCE0;
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
    padding: 0px;
    
}

/* LIST */
ul {
  list-style: none;
  margin: 0px;
}

li {
margin: 0px;    
}

/* FORM */
input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: block;
  float: left;
  height: 100vh;
  width: 40px;
  overflow: hidden;
  background: #FEE440;
  text-align: center;
  font-size: 12px;
  line-height: 50px;
  -o-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  -webkit-transition: background 300ms ease;
  transition: background 300ms ease;
}

li:nth-child(even) > input + label {
  background: #EA526F;
}

label:hover,
li:nth-child(even) > input + label:hover {
  background: #FF7F11;
  color: #33204a;
  cursor: pointer;
}

input[type="radio"]:checked ~ label {
  background: #00f5d4;
  color: #fff;
  cursor: default !important;
}

/* SLIDES */
.accslide {
  display: block;
  height: 100%;
  width: 0px;
  float: left;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
  -moz-transition: all 700ms ease;
  -o-transition: all 700ms ease;
  -webkit-transition: all 700ms ease;
  transition: all 700ms ease;
}
.accslide * {
  padding-left: 10px;
}
.accslide img {
  margin-top: 0px;
}

input[type="radio"]:not(:checked) ~ label > * {
  padding-left: 7px;
  font-size: 14px;
  white-space: nowrap;
    -moz-transform: all 700ms ease;
  -o-transform: all 700ms ease;
  -ms-transform: all 700ms ease;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

input[type="radio"]:checked ~ label > * {
  display: none;
}

li:nth-child(1):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 80px);
 
}

li:nth-child(2):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 80px);
 
}

li:nth-child(1):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
 
}

li:nth-child(2):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
 
}

li:nth-child(3):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
 
}

li:nth-child(1):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
 
}

li:nth-child(2):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
 
}

li:nth-child(3):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
 
}

li:nth-child(4):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
 
}

li:nth-child(1):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
 
}

li:nth-child(2):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
 
}

li:nth-child(3):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
 
}

li:nth-child(4):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
 
}

li:nth-child(5):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
 
}

li:nth-child(1):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
 
}

li:nth-child(2):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
 
}

li:nth-child(3):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
 
}

li:nth-child(4):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
 
}

li:nth-child(5):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
 
}

li:nth-child(6):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
 
}

li:nth-child(1):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
 
}

li:nth-child(2):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
 
}

li:nth-child(3):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
 
}

li:nth-child(4):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
 
}

li:nth-child(5):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
 
}

li:nth-child(6):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
 
}

li:nth-child(7):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
 
}

li:nth-child(1):nth-last-child(8) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
 
}

li:nth-child(2):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
 
  width: calc(100% - 320px);
}

li:nth-child(3):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
 
}

li:nth-child(4):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
 
}

li:nth-child(5):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
 
}

li:nth-child(6):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
 
}

li:nth-child(7):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
 
}

li:nth-child(8):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
 
}

HTML:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Scott Davies</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<!-- These variables help keep track of the input name and ID-->
<!-- currentTab helps keep track of each individual input-->
<!-- tabControlName is used as a unique identifier for the accordion-->

<ul>
  <li>
    <!-- Using radio inputs means only one can be selected at a time-->
    <!-- The ID must be unique so the label will point to the input-->
    <input id="rad1" type="radio" name="rad" checked="checked"/>
    <label for="rad1">
      <div>About Scott</div>
    </label>
    <div class="accslide">
      <div class="content" style="overflow-y:scroll;">
        <h1>About Scott Davies</h1>
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>        <p>About me...</p>        
        <p>About me...</p>        <p>About me...</p>
      </div>
    </div>
  </li>
  <li>
    <!-- Using radio inputs means only one can be selected at a time-->
    <!-- The ID must be unique so the label will point to the input-->
    <input id="rad2" type="radio" name="rad"/>
    <label for="rad2">
      <div>Short Stories</div>
    </label>
    <div class="accslide">
      <div class="content">
        <h1>Short Stories</h1>
        <p>Coming Soon...</p>
      </div>
    </div>
  </li>
  <li>
    <!-- Using radio inputs means only one can be selected at a time-->
    <!-- The ID must be unique so the label will point to the input-->
    <input id="rad3" type="radio" name="rad"/>
    <label for="rad3">
      <div>Screenplays</div>
    </label>
    <div class="accslide">
      <div class="content">
        <h1>Screen Plays</h1>
        <p>Coming Soon...</p>
      </div>
    </div>
  </li>
  <li>
    <!-- Using radio inputs means only one can be selected at a time-->
    <!-- The ID must be unique so the label will point to the input-->
    <input id="rad4" type="radio" name="rad"/>
    <label for="rad4">
      <div>Videos</div>
    </label>
    <div class="accslide">
      <div class="content">
        <h1>Video 1</h1>
        <p>Coming Soon...</p>
      </div>
    </div>
  </li>
</ul>
<!-- partial -->
</body>
</html>
Solution

  • In "index.html" :

    Change <div class="content" style="overflow-y:scroll;"> by <div class="content">

    In "style.css":

    body {
  ...
  overflow: hidden;     /* Add this line */
}

    and create this class

    .content {
  overflow-y: scroll;
  height: 100vh;
}

    Demo :

    @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans');

* {
  margin: 0;
  padding: 0; }

html, body {
  height: 100%;
  margin: 0;
  background: #424874;
}

body {
  color: #33204a;
  font-family: 'Special Elite', sans-serif;
  margin: 0px;
  padding: 0px;
  overflow: hidden;                            /* Here */
}

h1 {
  font-family: 'Special Elite';
  color: #FFF; 
  padding-top: 10px;
}

p {
  color: #C9CCE0;
  font-family: 'Open Sans', sans-serif;
  margin: 0px;
  padding: 0px;
}

/* LIST */
ul {
  list-style: none;
  margin: 0px;

}

li {
margin: 0px;
}


.content {                                    /* Here */
  overflow-y: scroll;
  height: 100vh;
}

/* FORM */
input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: block;
  float: left;
  height: 100vh;
  width: 40px;
  overflow: hidden;
  background: #FEE440;
  text-align: center;
  font-size: 12px;
  line-height: 50px;
  -o-transition: background 300ms ease;
  -moz-transition: background 300ms ease;
  -webkit-transition: background 300ms ease;
  transition: background 300ms ease;
}

li:nth-child(even) > input + label {
  background: #EA526F;
}

label:hover,
li:nth-child(even) > input + label:hover {
  background: #FF7F11;
  color: #33204a;
  cursor: pointer;
}

input[type="radio"]:checked ~ label {
  background: #00f5d4;
  color: #fff;
  cursor: default !important;
}

/* SLIDES */
.accslide {
  display: block;
  height: 100%;
  width: 0px;
  float: left;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
  -moz-transition: all 700ms ease;
  -o-transition: all 700ms ease;
  -webkit-transition: all 700ms ease;
  transition: all 700ms ease;
}
.accslide * {
  padding-left: 10px;
}
.accslide img {
  margin-top: 0px;
}

input[type="radio"]:not(:checked) ~ label > * {
  padding-left: 7px;
  font-size: 14px;
  white-space: nowrap;
    -moz-transform: all 700ms ease;
  -o-transform: all 700ms ease;
  -ms-transform: all 700ms ease;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

input[type="radio"]:checked ~ label > * {
  display: none;
}

li:nth-child(1):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 80px);
}

li:nth-child(2):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 80px);
}

li:nth-child(1):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(2):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(3):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(1):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(2):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(3):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(4):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(1):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(2):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(3):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(4):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(5):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(1):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(2):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(3):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(4):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(5):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(6):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(1):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(2):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(3):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(4):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(5):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(6):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(7):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(1):nth-last-child(8) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(2):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(3):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(4):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(5):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(6):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(7):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(8):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px);
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Scott Davies</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <!-- These variables help keep track of the input name and ID-->
  <!-- currentTab helps keep track of each individual input-->
  <!-- tabControlName is used as a unique identifier for the accordion-->

  <ul>
    <li>
      <!-- Using radio inputs means only one can be selected at a time-->
      <!-- The ID must be unique so the label will point to the input-->
      <input id="rad1" type="radio" name="rad" checked="checked" />
      <label for="rad1">
        <div>About Scott</div>
      </label>
      <div class="accslide">
        <div class="content">
          <h1>About Scott Davies</h1>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
          <p>About me...</p>
        </div>
      </div>
    </li>
    <li>
      <!-- Using radio inputs means only one can be selected at a time-->
      <!-- The ID must be unique so the label will point to the input-->
      <input id="rad2" type="radio" name="rad" />
      <label for="rad2">
        <div>Short Stories</div>
      </label>
      <div class="accslide">
        <div class="content">
          <h1>Short Stories</h1>
          <p>Coming Soon...</p>
        </div>
      </div>
    </li>
    <li>
      <!-- Using radio inputs means only one can be selected at a time-->
      <!-- The ID must be unique so the label will point to the input-->
      <input id="rad3" type="radio" name="rad" />
      <label for="rad3">
        <div>Screenplays</div>
      </label>
      <div class="accslide">
        <div class="content">
          <h1>Screen Plays</h1>
          <p>Coming Soon...</p>
        </div>
      </div>
    </li>
    <li>
      <!-- Using radio inputs means only one can be selected at a time-->
      <!-- The ID must be unique so the label will point to the input-->
      <input id="rad4" type="radio" name="rad" />
      <label for="rad4">
        <div>Videos</div>
      </label>
      <div class="accslide">
        <div class="content">
          <h1>Video 1</h1>
          <p>Coming Soon...</p>
        </div>
      </div>
    </li>
  </ul>
  <!-- partial -->
</body>

</html>