html和css放置兩個固定div之間的非固定div

我試圖建立一個網站有4個主要divs（稍後會更多），其中3個是固定的，所以他們不會移動，當我滾動，和其中一個不固定。我一直在直接進行6小時30分鐘，搜索可能的答案，檢查youtube並花了至少2個小時看着stackoverflow帖子，沒有一個真正指出我在正確的方向。html和css放置兩個固定div之間的非固定div

設計即時尋找獲得：

design

源（HTML）：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script type="text/javascript" src="scripts.js"></script> 
    <title>Title</title> 
</head> 
<body> 

    <div class="menu"> 
     <a href="#"></a> 
    </div> 

    <div class="contact"></div> 

    <div class="upper"></div> 

    <div class="main"> 
     <div class="paragraph"></div> 
     <div class="paragraph"></div> 
     <div class="paragraph"></div> 
     <div class="paragraph"></div> 
    </div> 
</body> 
</html>

源（CSS）：

/**/ 
html,body{ 
    height: 100%; 
} 

body { 
    background-image: url("background.jpg"); 
} 

div { 
    margin: 0px; 
} 

.menu { 
    background-color:lightgray; 
    color:black; 
    width: 200px; 
    height: 100%; 
    top:200px; 
    right: 0; 
    text-align: center; 
    position:fixed; 
} 

.contact { 
    background-color:lightgray; 
    color:black; 
    width: 200px; 
    height: 100%; 
    top: 200px; 
    left: 0; 
    text-align: center; 
    position:fixed; 
} 

.upper { 
    background-color: black; 
    width: 100%; 
    height: 200px; 
    position:fixed; 
    top:0px; 
    left:0px; 
} 

.main { 
    background-color: green; 
    width: 100%; 
    margin-top:200px; 
    height: 200vh; 
    left: ; 
} 

.paragraph { 
    background-color: red; 
    width: 100%; 
    height: 50vh; 
}

我試圖改變的寬度.main div，但不管我嘗試的div是在.contact還是.me下進行nu div

.paragraph divs進入.main div，在.main div被正確定位後保存一些文本和圖像。在我的來源div的大小不完全像他們在我的設計，但我一直試圖或許可以解決我的問題。

.js文件目前仍然是空的，所以我沒有發佈它的任何來源。

歡迎任何幫助：鏈接;來源;註釋;如果您知道某件事可能會將我指向正確的方向，請發佈它！

編輯：我嘗試使用包裝，但這並沒有爲我工作太好，我可能做錯了什麼，我張貼源代碼，當我在瀏覽器中打開時看起來最像我的設計。

的jsfiddle：http://jsfiddle.net/zt1Lyaop/

來源

2015-10-15 FrankK

嗯......既然有了HTML5，那麼最好使用

和

啊，謝謝！現在就生病吧！ – FrankK

我忽略了你現有的代碼並提出建立這樣一個佈局的一個新的HTML5和響應方式。我希望這有助於你理解這個概念更好 http://jsfiddle.net/7k9vhk4r/2/

的關鍵是使用fixed和relative定位，再加上創建一個基於百分比偏移。

來源

2015-10-15 14:48:34

這確實好多了，也很適合我的需求，謝謝。 – FrankK

沒問題！ :) –

實際上，在這種情況下，我如何將標題中的文本垂直居中和水平居中？ – FrankK

我只是改變了這一點：

添加margin:0身體

變化.main規則：

/*width: 100%;*/ 
margin: 200px 200px 0; 
height: 2000px; /* to make it big */ 
/*left: ;*/

觀看演示整版

body { 
 

 
    background-image: url("background.jpg"); 
 
    margin:0; 
 
} 
 

 
div { 
 

 
    margin: 0px; 
 

 
} 
 

 
.menu { 
 

 
    background-color: lightgray; 
 

 
    color: black; 
 

 
    width: 200px; 
 

 
    height: 100%; 
 

 
    top: 200px; 
 

 
    right: 0; 
 

 
    text-align: center; 
 

 
    position: fixed; 
 

 
} 
 

 
.contact { 
 

 
    background-color: lightgray; 
 

 
    color: black; 
 

 
    width: 200px; 
 

 
    height: 100%; 
 

 
    top: 200px; 
 

 
    left: 0; 
 

 
    text-align: center; 
 

 
    position: fixed; 
 

 
} 
 

 
.upper { 
 

 
    background-color: black; 
 

 
    width: 100%; 
 

 
    height: 200px; 
 

 
    position: fixed; 
 

 
    top: 0px; 
 

 
    left: 0px; 
 

 
} 
 

 
.main { 
 

 
    background-color: green; 
 

 
    /*width: 100%;*/ 
 

 
    margin: 200px 200px 0; 
 

 
    height: 2000px; 
 

 
    /*left: ;*/ 
 

 
} 
 

 
.paragraph { 
 

 
    background-color: red; 
 

 
    width: 100%; 
 

 
    height: 50vh; 
 

 
}

<div class="menu"> 
 
    <a href="#"></a> 
 
</div> 
 

 
<div class="contact"></div> 
 

 
<div class="upper"></div> 
 

 
<div class="main"> 
 
    <div class="paragraph"></div> 
 
    <div class="paragraph"></div> 
 
    <div class="paragraph"></div> 
 
    <div class="paragraph"></div> 
 
</div>

來源

2015-10-15 14:38:28 Apolo

這實際上是爲我做的，非常感謝！ – FrankK

html和css放置兩個固定div之間的非固定div

回答

相關問題