Question

我尝试将网站配置为始终为整页格式，顶部和底部菜单栏始终位于顶部和底部，页面的中心内容位于它们之间，带有滚动条。中心内容需要是滚动页面的唯一部分。

我几乎就在那里，但是我无法将中心内容放在其中，它从顶部菜单开始，始终在底部菜单后面运行。

我已经剥离并集中了网站上的代码，如果您调整屏幕大小，您会看到内容在底部菜单后面运行。

任何指针？非常感谢

（原谅这些评论，当我尝试调试时，我总是迷路，所以把它们放在那里，因为我编码它们会更容易!!）

这里是指向错误页面的链接： www.marinersipswich.co.uk/new2/test.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<div id="container">

<div id="topmenu">
Top Menu Here
</div><!-- end topmenu -->


<div id="content">

Blah Blah Other content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>


</div><!--End content-->

<div id="bottommenu">
Bottom Menu Here
</div><!-- end bottommenu -->



</div><!-- end container -->

<style type="text/css">

html {
height:100%;
margin:0;
}


body {
height:100%;
margin:0;
background-color: #ffffff;
font: 12px Arial;
color: #000000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
overflow:hidden;
}


#container {
height:99%;
max-height:100%;
min-height:100%;
width:90%;
max-width:1500px;
min-height:400px;
overflow:hidden;
position:relative;
margin: 0 auto;
background-color:#e9e9e9;
}


#content{
margin:20px;
position:relative;
height:100%;
max-height:100%;
overflow-x:hidden;
overflow-y:auto;
}


#topmenu{
padding: 10px 10px 10px 10px;
text-align:center;
height: 40px;
line-height: 40px;
margin: 40px 0 0;
width: 100%;
position:relative;
background-color:#00ff00;
}


#bottommenu{
padding: 10px 10px 10px 10px;
text-align:center;
height: 40px;
line-height: 40px;
margin: -80px 0 0;
width: 100%;
position: absolute;
bottom: 20px;
left: 0;
background-color:#00ff00;
}


</style>
</body>

</html>

Answer 1

两个固定定位的容器顶部和底部带有z-index，以避免滚动时文本可见。内容容器的顶部和底部边距。就是这个

滚动身体
http://fiddle.jshell.net/NZP9v/16/show/
http://fiddle.jshell.net/NZP9v/16
并且在固定定位的顶部和底部容器内具有额外容器的变体具有最大宽度。 http://fiddle.jshell.net/hAvA8/3/show

滚动内容容器
这里有一个内容滚动的变体：http://fiddle.jshell.net/u6VzU/4/show
并且在固定定位的顶部和底部容器内部具有额外容器的变体具有最大宽度并且滚动内容：http://fiddle.jshell.net/nZK6Q/5/show/

使用max-height 滚动内容容器 http://fiddle.jshell.net/ZmPv5/1/show
全高窗口的CSS，菜单顶部和底部，滚动居中的内容
http://fiddle.jshell.net/zu2zq/2/show

*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.max-width {
    background-color: #00FF00;
    margin: 0 auto;
    max-width: 1500px;
    padding: 10px;
}
#container {
    background-color: #E9E9E9;
    height: 100%;
    margin: 40px auto;
    max-width: 1500px;
    position: relative;
}
#content {
    border-bottom: 80px solid rgba(0, 0, 0, 0);
    height: 100%;
    margin: 40px 0 0;
    overflow: auto;
    padding: 20px;
    position: relative;
}
#topmenu {
    height: 40px;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10;
}
#bottommenu {
    bottom: 0;
    height: 40px;
    left: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 20;
}

固定容器需要一个额外的div来使居中的nax-width播放正常。

<div id="topmenu">
  <div class="max-width">Top Menu Here
  </div>
</div>

尝试使用滚动中心内容创建全高窗口，顶部和底部菜单

1 个答案: