Question

当使用CSS vh和百分比来定义元素的高度（例如div）时，如果内容溢出元素，元素是否会伸展。

在我的笔中，我正在尝试填写底部div（具有联系ID）的内容。但是一旦内容溢出，div就不会调整大小。 my pen

Answer 1

你的身高25％还可以，只是font-size: 30px不适合那么多内容，所以我添加了overflow:hidden所以你可以看到它是因为文字内容。更改字体大小应该有帮助。

  .section-style {
    width: 100%;
    font-size: 20px;
    height: 25%;
    overflow: hidden;
  }

function openNav() {

  document.getElementById("mysidenav").style.height = "100%";
  document.getElementById("window-top").style.height = "0%";


}

function closeNav() {

  document.getElementById("mysidenav").style.height = "0%";
  document.getElementById("window-top").style.height = "100%";


}

* {
  box-sizing: border-box;
  color: white;
}

body {
  margin: 0px;
  height: 100vh;
  overflow: scroll;
}

@media screen and (max-width: 500px) {
  header {
    height: 25%;
  }
  .sidenav {
    width: 100%;
    overflow-y: hidden;
    height: 0%;
    background-color: white;
    z-index: 1;
    transition: 2s;
  }
  #nav-box {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
    height: 100%;
  }
  .pages-box {
    display: flex;
    border: 1px solid white;
    list-style-type: none;
    width: 50%;
    height: 35%;
  }
  .pages {
    font-size: 2em;
    margin: auto;
    text-decoration: none;
  }
  #green {
    background-color: #195407;
  }
  #brown {
    background-color: #542407;
  }
  #purple {
    background-color: #540719;
  }
  #blue {
    background-color: #072b54;
  }
  .btn-box {
    width: 100%;
    height: 30%;
  }
  .closebtn {
    width: 100%;
    font-size: 4em;
    background-color: #542407;
    border: none;
  }
  #dropbtn {
    height: 40%;
    display: block;
    width: 100%;
    font-size: 2em;
    background-color: #542407;
    border: none;
  }
  #window-top {
    height: 100%;
    transition: 2s;
    overflow-y: hidden;
  }
  #style-title {
    display: flex;
    height: 35%;
    background-color: #195407;
    transition: 2s;
  }
  #title {
    display: block;
    margin: 0 auto;
    font-size: 2.5em;
    transition: 2s;
  }
  #style-signature {
    display: flex;
    height: 25%;
    background-color: #072b54;
  }
  #signature {
    margin: 0 auto;
    display: block;
    font-size: 1.9em;
    font-family: AlexBrush;
  }
  .section-style {
    width: 100%;
    font-size: 20px;
    height: 25%;
    overflow: hidden;
  }
  #facts {
    background-color: #195407;
  }
  #traits {
    background-color: #072b54;
  }
  #contact {
    background-color: #540719;
  }
}

<head>

  <meta charset="utf-8" />
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="MainStyle.css">
  <script src="action.js"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title> Site of Demetrius Tuggle </title>

</head>

<body>

  <header>

    <nav id="mysidenav" class="sidenav">
      <ul id="nav-box">

        <li class="pages-box" id="green"><a href="#" class="pages"> Home </a></li>
        <li class="pages-box" id="brown"><a href="#" class="pages"> Experience </a></li>
        <li class="pages-box" id="purple"><a href="#" class="pages"> Aspirations </a></li>
        <li class="pages-box" id="blue"><a href="#" class="pages"> Contact Me </a></li>
        <li class="btn-box"><button class="closebtn" onclick="closeNav()">&#735;</button></li>


      </ul>
    </nav>
    <div id="window-top">
      <div id="style-title">

        <h1 id="title">
          Demetrius Tuggle
        </h1>

      </div>

      <div id="style-signature">

        <div id="signature"> Curosity &#43; Time </div>

      </div>
      <button id="dropbtn" onclick="openNav ()">	&#9776;	</button>
    </div>
  </header>

  <section class="section-style" id="facts">


  </section>


  <section class="section-style" id="traits">

  </section>


  <section class="section-style" id="contact">
    Why is the rest of this sentence not appearing. Shouldn't this div and everything else in this document resize to fit the rest of this sentence. Is the problem with using percentages, vh units or both.
  </section>

</body>

使用CSS vh单位和百分比时不显示内容

1 个答案: