關於首頁的問題

我爲我的團隊製作了一個乾淨的登錄頁面，但我不確定如何執行以下操作：使內容爲紅色框，然後在其下方顯示其他內容，以便用戶只需滾動即可下來查看它。我希望紅色框中的內容也可以全屏顯示。關於首頁的問題

進出口尋找類似：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

關於首頁的問題

回答

相關問題