DIV 元素具有 y 轴滚动但不会拉伸超过页面的 100% 高度

Question

我有一个我已经开始起草的网站，但由于某种原因我的块仅拉伸到浏览器的 100% 高度，包含主要内容的 div 会在页面下方进一步移动，具体取决于内容的长度，尽管包括滚动选项。

我想要的是网站的最大高度为浏览器 window 的 100%，而 div 中有一个滚动条。我看不出哪里错了。

我尝试在几个不同的地方添加 height: 100% ，并尝试使用 max-height 但无济于事。我浏览了 stackexchange，但不幸的是找不到适合我的答案。

如果有人能提供帮助那就太好了！

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>

Answer 1

在“index.html”中：

将 <div class="content" style="overflow-y:scroll;"> 更改为 <div class="content">

在“style.css”中：

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

并创建这个 class

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

演示：

@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>

DIV 元素具有 y 轴滚动但不会拉伸超过页面的 100% 高度

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

html

css

height

overflow