Trying to create full-height window, menus top and bottom, with scrolling centre content

StackOverflow https://stackoverflow.com/questions/22886828

  •  28-06-2023
  •  | 
  •  

سؤال

I'm trying to configure a site to have an always-full-page format, top and bottom menu bars that are always top and bottom, and the central content of the page sitting between them, with scrollbars. The central content need be the only part of the page that scrolls.

I'm nearly there, but I can't get the central content to sit within them, it starts below the top menu, always runs behind the bottom menu.

I've stripped back and centralised the code from the site, if you resize the screen you'll see the content runs behind the bottom menu.

Any pointers? Help much appreciated

(Forgive the comments, when I try and debug I always get lost, so putting these there as I code them makes it easier!!)

Here'sa link to the faulty page: 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>
هل كانت مفيدة؟

المحلول

Two fixed positioned containers top and bottom with z-index to avoid text being visible when scrolled. Top and bottom margin for the content container. That's it

Scroll on the body
http://fiddle.jshell.net/NZP9v/16/show/
http://fiddle.jshell.net/NZP9v/16
And a variation with extra container inside the fixed positioned top and bottom container with max-width. http://fiddle.jshell.net/hAvA8/3/show

Scroll on the content container
Here a variation with scroll on the content: http://fiddle.jshell.net/u6VzU/4/show
And a variation with extra container inside the fixed positioned top and bottom container with max-width with the scroll on content: http://fiddle.jshell.net/nZK6Q/5/show/

scroll on the content container with a max-height
http://fiddle.jshell.net/ZmPv5/1/show
The CSS for full-height window, menus top and bottom, with scrolling centred content
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;
}

The fixed container needs an extra div to make the centered nax-width play ok.

<div id="topmenu">
  <div class="max-width">Top Menu Here
  </div>
</div>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top