关于首页的问题

我为我的团队制作了一个干净的登录页面，但我不确定如何执行以下操作：使内容为红色框，然后在其下方显示其他内容，以便用户只需滚动即可下来查看它。我希望红色框中的内容也可以全屏显示。关于首页的问题

进出口寻找类似：http://ironsummitmedia.github.io/startbootstrap-landing-page/

任何帮助的家伙？

我的代码：

<body> 

     <input type="checkbox" id="navbar-checkbox" class="navbar-checkbox"> 

    <nav class="menu"> 
        <li><a href="#" id="logo-nav"> < /> </a></li> 
     <ul> 
      <li><a href="#" id="active">Home</a></li> 
      <li><a href="#">Forum</a></li> 
      <li><a href="#">Projects</a></li> 
      <li><a href="#">Store</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 

     <label for="navbar-checkbox" class="navbar-handle"></label> 
    </nav> 

    <div class="content-main"> 
     <h1>System</h1> 
     <p>"A new look into technology"</p> 
    </div> 

    <div class="otherContent"> 
     <img src="img/PHP.jpg"> 
     <h1>Testing</h1> 
    </div> 

</body> 
</html> 

CSS: 

     /*Main CSS*/ 

.content-main{ 
    position: fixed; 
    margin-top: 80px; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 
    width:100vw; 
    height:100vh; 
} 

.otherContent{ 
    width:100vw; 
    height:1000px; 
    border:1px solid black; 
    background:aqua; 

    }

来源

2015-10-28 Zoid

从我知道你需要的JavaScript（easyer用jQuery）来设置窗口或视口的高度.. – caramba

请你箱子的我会怎么做一个例子这个好吗？ – Zoid

视口高度和宽度我们可以用css设置，不需要有JavaScript。看看下面的答案 – Jayababu

希望这会帮助你。

.landingContent{ 
 
    width:100vw; 
 
    height:100vh; 
 
    background:green 
 
    } 
 
.otherContent{ 
 
    width:100vw; 
 
    height:1000px; 
 
    border:1px solid black; 
 
    background:aqua; 
 
    
 
    }

<div class="landingContent"></div> 
 
<div class="otherContent"></div>

来源

2015-10-28 15:18:19 Jayababu

我试过你的代码，它没有帮助我。任何帮助？ – Zoid

你可以发布代码，你已经尝试过，以便我可以帮你 – Jayababu

我已经更新了我原来的帖子 – Zoid

关于首页的问题

回答

相关问题