我试图让我的部分随着小型设备上的内容而增加，我添加了 overflow: auto 但它添加了一个滚动条并使内容滚动，我希望这些部分具有特定的高度以便我可以居中通过使用 flexbox 垂直内容，但没有溢出:自动，各部分相互拥抱并且变得困惑..这是我的代码，我还会在最后添加一个代码笔，我也想获得更多按钮在介绍部分的末尾，我尝试了从 margin-top 开始的所有操作(它使标题向上并且我希望它垂直居中)我尝试了 position: absolute 但它在小屏幕上效果不佳..
HTML:
<!DOCTYPE html>
<html>
<head>
<!--Required Meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Custom CSS-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!--Customs Fonts-->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<!-- Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!--Title-->
<title>Peter Brezitski | Front-End Developer</title>
</head>
<body>
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-dark bg-company-red fixed-top">
<a class="navbar-brand" href="#intro">brezitski</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#about">About <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link" href="#contact-form">Contact</a>
</div>
</div>
</nav>
<!--Intro-->
<header id="intro">
<div class="container-fluid">
<div class="row text-center ">
<div class="col-md-12">
<h1 class="display-6"> I'm Peter, an upcoming Front-End Developer, gamer and lo-fi lover. </h1>
</div>
<div class="col-md-12">
<a id="more" href="#about">More<br><i class="arrow down"></i></a>
</div>
</div>
</div>
</div>
</header>
<hr>
<!--About-->
<section id="about">
<div class="container">
<div class="row mx-auto">
<div class="col-md-12">
<img class="img-fluid" src="https://scontent-sof1-1.xx.fbcdn.net/v/t1.0-9/24294163_548521265481693_3086368752085107633_n.jpg?_nc_cat=107&oh=b816b352c5e8cc5e61271a7569e0a560&oe=5C2C05F5">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-center info"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia saepe at rerum sed, tempora cupiditate, neque iure ab inventore porro eligendi, voluptatibus quisquam nihil qui asperiores nostrum libero provident quaerat.</p>
</div>
</div>
<div class="row">
<div class=col-md-12>
<p class="text-center what"> My skills:
<p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p class="text-center">HTML5:
<p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 95%">95%</div>
</div>
</div>
<div class="col-md-3">
<p class="text-center">CSS3 / SaSS:
<p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
</div>
</div>
<div class="col-md-3">
<p class="text-center">Bootstrap:
<p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 40%">40%</div>
</div>
</div>
<div class="col-md-3">
<p class="text-center">Javascript:
<p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 20%">20%</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<!--Projects-->
<section id="projects">
<div class="container">
<p class="text-center">Here are some of my projects:</p>
<div class="row text-center text-lg-left">
<div class="col-lg-4 col-md-4 col-xs-6">
<a href="#" class="d-block mb-3 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-4 col-md-4 col-xs-6">
<a href="#" class="d-block mb-3 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-4 col-md-4 col-xs-6">
<a href="#" class="d-block mb-3 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-4 col-md-4 col-xs-6">
<a href="#" class="d-block mb-3 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-4 col-md-4 col-xs-6">
<a href="#" class="d-block mb-3 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-4 col-md-4 col-xs-6">
<a href="#" class="d-block mb-3 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
</div>
</div>
</section>
<hr>
<!--Contact-->
<section id="contact">
<div class="container-fluid">
<div id="form-cont">
<form class="justify-content-center" id="contact-form">
<form method="post">
<p class="text-center">Do you want us to work together on a project? Leave me a message.</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="txtName" class="form-control" placeholder="Your Name *" value="" />
</div>
<div class="form-group">
<input type="text" name="txtEmail" class="form-control" placeholder="Your Email *" value="" />
</div>
<div class="form-group">
<input type="text" name="txtPhone" class="form-control" placeholder="Your Phone Number *" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea name="txtMsg" class="form-control" placeholder="Your Message *" style="width: 100%; height: 150px;"></textarea>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" class="btn btn-primary btnContact" value="Send Message" />
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</section>
<hr>
<!--Social-->
<footer id="social">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a href="https://www.facebook.com/writerofthedark"><span style="font-size: 25px;"><i class="fab fa-facebook-f"></i>
</span></a>
<a href="https://www.instagram.com/writerofthedark/"><span style="font-size: 25px;"><i class="fab fa-instagram"></i>
</span></a>
<a href="https://github.com/PeterBrezitski"><span style="font-size: 25px;"> <i class="fab fa-github"></i>
</span></a>
<a href="https://meta.stackoverflow.com/users/8202546/peter-brezitski"><span style="font-size: 25px;"><i class="fab fa-stack-overflow"></i>
</span></a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap Required-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--Custom Scripts-->
</body>
</html>
CSS - SASS:
body
scroll-behavior: smooth
height: 100%
font-family: "Gloria Hallelujah", cursive
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%)
p
font-size: 20px
section
width: 100%
height: 100%
/***HEADER***/
/*Brand*/
.navbar-brand
font-family: "Gloria Hallelujah", cursive
font-size: 22px
text-transform: uppercase
color: #000000 !important
.navbar-brand:hover
color: #8a8a8a !important
/* Navigation Bar */
.navbar-nav
justify-content: flex-end
flex-grow: 1
#navbarNavAltMarkup
align-items: flex-end
justify-content: flex-end
#navbarNavAltMarkup a
font-family: "Gloria Hallelujah", cursive
font-size: 14px
text-transform: uppercase
text-align: center
color: #000000
padding-right: 30px
#navbarNavAltMarkup a:link
#navbarNavAltMarkup a:visited
#navbarNavAltMarkup a:hover
border-bottom: rgba(138, 138, 138, 0.4) 2px solid
color: #8a8a8a
#navbarNavAltMarkup a:active
border-bottom: 2px solid
color: rgba(138, 138, 138, 0.4) !important
#navbarNavAltMarkup a:focus
outline: none
.custom-toggler .navbar-toggler
border-color: #000000 !important
font-size: 14px
.custom-toggler .navbar-toggler-icon
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important
.custom-toggler.navbar-toggler:focus
outline: none
.bg-company-red
background: transparent !important
.bg-company-red.scrolled
background: red !important
/***INTRO***/
#intro
font-family: "Gloria Hallelujah", cursive
height: 90vh
display: flex
flex-direction: column
align-items: center
justify-content: center
#intro h1
font-size: 32px
#intro a
font-family: "Gloria Hallelujah", cursive
text-decoration: none
color: black
text-align: center
display: block
#intro a:focus
outline: none
#intro i
border: solid black
border-width: 0 2px 2px 0
display: inline-block
padding: 3px
margin-bottom: 10px
#intro .down
transform: rotate(45deg)
-webkit-transform: rotate(45deg)
/***ABOUT***/
#about
font-family: "Gloria Hallelujah", cursive
height: 90vh
display: flex
flex-direction: column
justify-content: center
overflow: auto
#about img
border-radius: 50%
width: 200px
height: 200px
#about .info
margin: 60px 0 40px 0
#about p
margin-top: 20px
/***Projects***/
#projects
font-family: "Gloria Hallelujah", cursive
height: 70vh
display: flex
flex-direction: column
align-items: center
justify-content: center
overflow: auto
#projects p
padding-bottom: 50px
/***Contact***/
#contact
font-family: "Gloria Hallelujah", cursive
height: 70vh
display: flex
flex-direction: column
align-items: center
justify-content: center
overflow: auto
#form-cont
display: flex
flex-direction: column
align-items: center
justify-content: center
#contact-form p
padding-bottom: 50px
#contact-form
width: 65%
#contact-form input
border-radius: 10px
#contact-form textarea
border-radius: 10px
#contact-form .btnContact
border-radius: 10px
border-color: #8a8a8a
background-color: white
color: black
#contact-form .btnContact:hover
color: #8a8a8a
cursor: pointer
/***Social***/
#social
text-align: center
#social a
margin: 0px 10px 0px
color: black
#social a:hover
color: #8a8a8a
#social a:focus
outline: none
最佳答案
如果您要为较长的内容设置特定的高度，它会溢出并显示滚动条。
尝试移除 height 和 overflow 属性，它会让内容随着内容在所有设备屏幕上的增长而增长
https://codepen. io/anon/pen/wYvVMa
关于html - 在小型设备上保持内容增长的部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52560857/