如何使网页的特定部分完全占据用户查看窗口的区域？

时间：2017-01-13 00:50:43

标签： html css 

html, body{
  height:100%;
}
.fillheight{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.fillheight-2{
    flex:1;
}

/*NAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
VVVVVVVVVVVVV
NAV
NAV
NAV*/
.fixated{
  position:fixed;
}
  * {
  box-sizing: inherit;
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;
}

.list-style{
  list-style-type: none;
}

.a{
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  color: #938653;
  
  @media (min-width: 100px) {
    font-size: 1em;
  }
  @media (min-width: 600px) {
    font-size: 1.6em;
  }
   @media (min-width: 1000px) {
    font-size: 2.1em;
  }
  
  
 }

.flex{
  background-color: #212121;
  display: flex;
  padding: 10px;
  justify-content: space-around;
 width: 100%;
  margin: auto 0;
}
/*HOVERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR
RRRRRRRRRRRRRRRRRRRRRR

RRRRRRRRRRRR
RRRRRRRR*/
a {
  text-decoration: none;
  }

a:hover,
a:active,
a:link {
   color : #938653;
   text-decoration: none;
}

.btn-2 {
    letter-spacing: 0px;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 10px;
}

.btn-2:after,
.btn-2:before {
  
  border: 1px solid rgba(#938653, 0);
  bottom: 2px;
  top: 2px;
  content: " ";
  display: block;
  position: relative;
  transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: #938653;
  transition: width 350ms ease-in-out;
  width: 100%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 100%;
}
/*WELCOMEEEEEEEEEEEEEEEEEEEEEEE
WELCOMEEEEEEEEEEEEEEEEEEEE
WELCOMEEEEEEEEEEEEEE
EEEEEEEEEEEEEE
EEEEEEEEEEEEEE*/
 * {
  box-sizing: inherit;
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;
}

html,body{
  height: 100%;
  background: #4A6556;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #4A6556;
  
  padding-top:60px;
  height: 100vh;
}

.Hey{
  font-family: 'Kumar One', cursive;
  color: #938653;
  font-size: 38px;
  
  @media (min-width:500px){
    font-size: 70px;
  }

  @media (min-width:800px) {
    font-size:100px;
  }
  
  @media (min-width:1100px) {
    font-size:165px;
  }
}

.Hello{
  font-family: 'Lato', sans-serif;
  color:#212121;
  font-size: 16px;
  
   @media (min-width:500px){
    font-size: 24px;
  }
  
   @media (min-width:800px) {
    font-size:40px;
  }
  
  @media (min-width:1100px) {
    font-size:58px;
  }
}
/*ABOUT
ABOUTTTTTTTTTTTTTT
ABOUTTTTTTTTTTTT
ABOUTTTTTTTTTT*/

.parent{
  display: flex;
  flex-flow: row wrap;
  background:#212121;
  padding-bottom:50px;
}

.general{
  background:#212121;
  border-radius: 7px;
  margin: 5px;
  padding: 20px;
}

.Header{
  order: 1;
  height: 100px;
  flex: 0 1 100%;
  
  color: #4A6556;
  font-family: 'Kumar One', cursive;
  font-size: 80px;
  padding-left: 50px;
  padding-top:60px;
}

.Main{
  order: 2;
  min-height: 250px;
  flex: 2.5 1;
  @media(max-width: 800px){
   flex:1 1 100%;
   
  }
  
   color: #938653;
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  padding: 20px 50px;
  }

.Pic{
  order: 4;
  flex: 1 1;
  flex-grow: 1;
  
  padding-right: 55px;
}

.pic{
  text-align: center;
}


/*PROJECTTTTTTTTTTTTTTT
PROJECTTTTTTTTTTTTTT
PROJECTTTTTTTTTTTTTTTT
PROJECTTTTTTTTTTTTTT
*/

.Section{
  @media (max-width:600px){
    zoom:90%;
  }
  
   @media (max-width:512px){
    zoom:85%;
  }
  
   @media (max-width:489px){
    zoom:80%;
  }
  @media (max-width:462px){
    zoom:70%;
  }
  @media (max-width:420px){
    zoom:60%;
  }
  
}

.Flexy{

 display: flex;
 flex-flow: row wrap;
 align-items: center;
 align-content: center;
  background: #4A6556;
  padding-bottom:50px;
  padding-top:30px;
}
  
.coloring {
  
  border-radius:7px;
  padding: 5px;
 
  margin: 5px
}

.Projects{
  order: 1;
  flex: 0 1 100%;
  font-family: 'Kumar One', cursive;
  color: #938653;
  font-size: 80px;
  padding-left: 50px;
}

.Tribute{
  order: 2;
  flex: 1 1;
  text-align: center;
  
  font-family: 'Kumar One', cursive;
  color:#212121;
  font-size: 50px;
  
}

.Portfolio{
  order: 3;
  flex: 1 1;
  text-align:center;
  @media (max-width:1120px){
    flex:100%;
  }
  
   font-family: 'Kumar One', cursive;
  color:#212121;
  font-size: 50px;
}

.fade{
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}

.fade:hover {
  opacity: 0.4;
}

.word-1{
  position: relative;
  left: -62px;
  top:26px;  
}

.word-2{
  position: relative;
  left:10px;
  top:23px;
}

/*CONTACTTTTTTTTTTTTTTTTTTTTT
CONTACTTTTTTTTTTTTTTTTTTTT
CONTACTTTTTTTTTTTTTT
TTTTTTTTTTTTTT
TTTTTTTTTTTTTTTTT
TTTTTT*/

.marking{
  
  border-radius: 7px;
  margin: 5px;
  padding:0px;
}

.contener{
  display:flex;
  align-items: center;
  flex-flow: column;


  background:#212121;
  padding-top:40px;
  padding-bottom:40px;
}

.Contact{
  order:1;
  width: 100%;
  padding-left: 1.0em;
  margin-bottom:50px;
  font-family: 'Kumar One', cursive;
  color:#938653;
  font-size:75px;
  
}

.Email{
  text-align: center;
  order:2;
  font-family: 'Raleway', sans-serif;
  color:#4A6556;
  font-size: 50px;
  
}

.Linkedin{
  text-align: center;
  order: 3;
  font-family: 'Raleway', sans-serif;
  color:#4A6556;
  font-size:50px;
 
}

.email{
  background:#4A6556;
  color:#938653;
  padding-left:9px;
  padding-right:9px;
  border-radius:6px;
}

//colors
$red: #212121;
$white: red;

//base styles

* {
  box-sizing: inherit;
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;
}


.btn-3 {
  background: lighten($red, 3%);  
  border: 0px solid darken($red, 1);
  box-shadow: 9px 9px 0 darken($red, 5%), 2px 4px 6px darken($red, 2%);
 
  letter-spacing: 1px;
  transition: all 150ms linear;
  padding:0px;
}

.btn-3:hover {
  background: darken($red, 1.5%);
  border: 0px solid rgba(#000, .05);
  box-shadow: 0px 0px 0px rgba(#fff, 1);
  color: lighten($red, 18%); 
  text-decoration: none;
  text-shadow: 0px 0px 0 darken($red, 9.5%);
  transition: all 250ms linear;
  opacity:0.8;
}

.zoomout{
  @media(max-width:760px){
    zoom:80%;
  }
  @media(max-width:580px){
  zoom:70%;
  }
  @media(max-width:580px){
  zoom:60%;
  }
  @media(max-width:430px){
  zoom:50%;
  }
  @media(max-width:430px){
  zoom:50%;
  }
  @media(max-width:430px){
  zoom:40%;
  }  
  
}
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">

<body class="fillheight">
  
  <div class="fillheight-2">
    <ul class="flex fixated list-style">
      
  <li><a href="#" class="btn-2 a">About </a></li>
  <li><a href="#" class="btn-2 a">Projects</a></li>
  <li><a href="#" class="btn-2 a">Contact</a></li>
  </ul>
  
  </div>
  <div class="fillheight-2">  
    
    <div class="box">
  
    <hey class="Hey">Welcome!</hey>  
    <hello class="Hello">This is David's portfolio page.</hello>
    
   </div>
   </div>
  
  <div class="fillheight-2">  
    
    <div class="parent">
    <header class="Header general">About</header>
    <main class="Main general">I started learning web development the December of 2016 by completing my first ever coding challenge on Free Code Camp. It was that December because that was when the winter recess of my college began, which meant I had abundance of time to assign to whatever activity I would take up.<br><br>The reason I am interested in web development is that I want to make beautiful and easy-to-use websites for people. I chose websites over apps or softwares that you have to download to use, because they are so accessible and widespread.</main>
    <pic class="pic Pic general"><img src=""http://imgur.com/kJNhW7r"><img src="http://i.imgur.com/kJNhW7r.jpg" title="source: imgur.com"" class="img-circle" alt="My head shot" width="250" height="250"></pic>
  </div>
  </div>
  
  <div class="fillheight-2">
    <section class="Flexy Section">

    <div class="coloring Projects ">Projects</div>
   <div class="coloring Tribute">
     <div class="word-1">Tribute Page</div>
      <a href="https://codepen.io/Hello911/pen/EZYWed"><img src="http://i.imgur.com/ifkpFbR.png" title="source: imgur.com" class="img-rounded fade" alt="Tribute Page" width="500" height="300"></a>
  </div>
   <div class="coloring Portfolio">
  <div class="word-2">My Portfolio Page</div>
     <a href="#"><img src="http://i.imgur.com/EnR9gj1.png" title="source: imgur.com" title="source: imgur.com" title="source: imgur.com" class="img-rounded fade" alt="Coming Soon!" width="500" height="300"></a>
  </div>
    
</section>
  </div>
  
  <div class="fillheight-2"> <section class="contener">
  <div class="marking Contact">Contact</div>
   <div class="marking Email">Email me <b class="email zoomout">experimentative@gmail.com</b></div>
   <div class="marking Linkedin">Or connect with me on <a href="https://www.linkedin.com/in/david-c-b8b880101
" class="btn-3 btn" target="_blank"><img src="http://i.imgur.com/7lTSk6J.png" title="source: imgur.com" alt="Linkedin Button" class="img-rounded" height=50px width=50px></a></div></div>
</section>
  
</body>

My project.

我想要第一部分，即“欢迎！”部分。我希望绿色矩形部分能够占据人们正在查看我的网页的窗口空间。（当然，不包括导航栏已占用的区域）。

我不知道这是否有意义。但基本上，在网页完成加载后，第一件事，以及观众应该看到的唯一事物是导航栏和欢迎部分。然后，查看者可以通过单击导航栏中的按钮或向下滚动来转到页面的其他部分/部分。 enter image description here 

Go to link. Too many lines of code.

2 个答案:

答案 0 :(得分：3)

使用视口单元（vw和vh）。在您的情况下，您希望使用100vh来表示100％的视口高度。

.box {
  height: 100vh;
}

答案 1 :(得分：0)

尝试使用ViewPort Height。 将此添加到您的Hey班：

.Hey{
    height:100vh;
}

这样您的部分或div将是窗口大小的100％。如果您希望导航栏+您的部分始终为高度的100％，请将两者放在使用height:100vh;

的容器上
相关问题
最新问题