Question

我正在构建一个单页网站，并希望每个部分的最小高度为100％。虽然这有效，但如果一个div的内容多于容器div没有扩展到适合内容的内容，那么留下一个丑陋的滚动条。

HTML

<div id="general">
<div id="home">
<main> 
  <div class="main" id="home_main">
    <h1 id="head_home">/NAME GOES HERE</h1>
    <h3 id="tag_home">Funky tagline here</h3>
  </div> 
</main>
</div>
<div id="about">
<main> 
  <div class="main">
    <h1 id="head_about">About</h1>
<p id="para_about">Hide at bottom of staircase to trip human find something else more interesting paw at beetle and eat it before it gets away, rub whiskers on bare skin act innocent. Kitty loves pigs eat from dog's food missing until dinner time, and spend all night ensuring people don't sleep sleep all day or where is my slave? I'm getting</p>
</div> 
</main>
</div>

CSS

#general {
  width: 100%;
  min-height: 100vh !important;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: -200;
}

#home {
  min-height: 100VH;
  background: yellow;
}

#about {
  min-height: 100vh;
  background: blue;
}

main {
  height: 100vh;
  width: 90%;
  min-height: 100% !important;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
  border: 3px solid black;
}

.main {
  width: 80%;
  padding: 40px;
  resize: both;
  overflow: visible;
  text-align: center;
}

到目前为止，我的工作是jsfiddle：https://jsfiddle.net/chris2001/jqwqxL6n/1/

感谢大家的帮助：）

Answer 1

切换height和min-height定义，以便main告知100％高，至少 100vh：

main {
    /* height: 100vh; min-height: 100% !important; */ 
    height:100%; min-height: 100vh;
    ...
}

EG：https://jsfiddle.net/jqwqxL6n/3/

Answer 2

基本上你可以使用#main: overflow-y: hidden;它可以解决你的问题隐藏滚动条，但它也会删除显示滚动的选项。因此，某些文字将无法访问我建议把放置文字的区域放大......

Answer 3

在主CSS上应用div方式并保留高度元素

display:block;
overflow:auto;

虽然您可能不需要但仍需要某些浏览器来呈现html，但您可以添加此position: relative

显示没有滚动条的整个div - flexbox

3 个答案: