如何用CSS創建這個HTML佈局？

-2

閱讀固定的頁眉和頁腳與CSS（在計算器上）的一些問題後，我試圖創建一個HTML佈局，因爲這：

HTML/CSS

在這種佈局中，無論是標頭和菜單是固定的。

我已經創建了一個2列的HTML文件：left for menu，right for content。但是，它帶有一個滾動菜單：

#menu { 
 
    width: 33%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
#page { 
 
    width: 66%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
#header { 
 
    width: 100%; 
 
    height: 100px; 
 
    position: fixed; 
 
} 
 

 
#content { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 100px; 
 
} 
 

 
#footer { 
 
    width: 100%; 
 
    height: 100px; 
 
    position: fixed; 
 
    bottom: 0; 
 
}

<div id="menu"> 
 
    MENU 
 
</div> 
 
<div id="page"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Some content...</p> 
 
    </div> 
 
    <div id="footer">Footer</div> 
 
</div>

當我加入這一行：position: fixed;在#menu，佈局將被打破。可以幫助我解決它嗎？

來源

2017-04-02 d2903740x

-1

目前您可以直接使用標籤<header> <body> <footer>您需要建立position : block。我想推薦你使用像引導一個框架，現在通常用來設計網頁，如果你是新的聯合國網頁，會不會對您有用

http://getbootstrap.com/

來源

2017-04-02 16:20:28

您可以檢查此http：這裏有許多代碼示例 –

-1

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<style type="text/css"> 
    .row > div{ 
     margin-bottom: 15px; 
    } 
    .header{ 
     min-height: 90px; 
    } 
    .footer{ 
     min-height: 60px; 
    } 
    .header, .footer{ 
     background: #2f2f2f; 
    } 
    .sidebar{ 
     background: #dbdfe5; 
    } 
    .content{ 
     background: #b4bac0; 
    } 
    .sidebar, .content{ 
     min-height: 300px; 
    } 
</style> 
</head> 
<body> 
    <!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. --> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <div class="header"></div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-3"> 
       <div class="sidebar"></div> 
      </div> 
      <div class="col-sm-9"> 
       <div class="content"></div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <div class="footer"></div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2017-04-02 16:33:27

如何用CSS創建這個HTML佈局？

回答

相關問題