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

回答

相关问题