本节以保持小型设备上内容的增长

时间:2018-09-28 18:24:05

标签: html css twitter-bootstrap

我正在尝试使部分的内容随着小型设备上的内容而增加,我添加了溢出:auto,但是添加了一个滚动条并使内容滚动,我希望这些部分具有特定的高度,以便我可以居中通过使用flexbox垂直显示内容,但没有溢出:自动,各节互相拥抱,并且变得凌乱。.这是我的代码,我还将在末尾添加一个Codepen,我也想获得更多按钮简介部分的末尾,我尝试了所有从上边距开始的操作(它使标题变高了,我希望它垂直居中),我尝试了位置:绝对,但在小屏幕上效果不好。

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

Codepen:https://codepen.io/Sarithan/pen/pOmxPy?editors=1100

1 个答案:

答案 0 :(得分:0)

如果要为较长的内容设置特定的高度,则它会溢出并显示滚动条。

尝试删除高度和溢出属性,它将使内容随着内容在所有设备屏幕上的增长而增加

https://codepen. io/anon/pen/wYvVMa