HTML CSS Div Overflow & Position "fixed"

Question

I've got an issue with styling using CSS. I have a website which constists of 4 major areas and 1 overall area. I simplified the code and added a color code to each area to get a quicker overview, but the main areas with there css looks like this:

.madegamesDiv {
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  min-width: 1200px;
  height: 34px;
  background-color: #778013;
  border-bottom: 1px solid #39950E;
}
.allDiv {
  position: fixed;
  top: 35px;
  left: 0px;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 850px;
  background-color: #39950E;
  overflow: scroll;
}
.leftDiv {
  position: absolute;
  z-index: 1;
  height: 775px;
  float: left;
  width: 200px;
  overflow: hidden;
  position: fixed;
  padding: 5px;
  background-color: #FFFF00;
}
.topDiv {
  min-width: 1000px;
  position: fixed;
  left: 200px;
  top: 35px;
  height: 150px;
  overflow: hidden;
  background-color: #FF00FF;
}
.mainDiv {
  width: 100%;
  min-width: 800px;
  max-width: calc(100% - 500px);
  background-color: #FFFFFF;
  position: fixed;
  left: 50%;
  margin-left: calc((100% - 500px)/2*(-1));
  top: 160px;
  height: calc(100% - 180px - 27px);
  overflow: auto;
  border: 1px solid #225909;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 10px;
  background-color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<body>
  <div id="madegamesDiv" class="madegamesDiv"></div>
  <div id="all" class="allDiv">
    <div id="left" class="leftDiv">
      <p>Menu Area</p>
    </div>
    <div style="position:absolute;left:200px;height:100%;top:0px;">
      <div id="top" class="topDiv">
        <p>Top Area with logo and other stuff</p>
      </div>
      <div id="main" class="mainDiv">
        <h1>Main Area</h1>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
        <p>Here is a lot of text and content</p>
      </div>
    </div>
  </div>
</body>

The main area main is the area with the most content. It needs to be scrollable. But my problem is now, how could I realize, when the browser window is too small, that all areas are displayed correctly? I thought on making the overall area all scrollable with CSS overflow:auto; or overflow:scroll;. But this does not work. I think the problem is, that the other areas are position:fixed and so the overall area all does not recognize the size of the other areas. Hard to explain, I hope, you can understand, what I try to explain. Is there a way to display scrollbars, when the window is too small? Thanks in advance for your help. If some code is missing or something is unclear, please feel free to ask.

if its about structuring your screen then you could probably use bootstrap-grid to structure your screen layout. Just a suggestion coz its bit easy to manage. — Sumeet Gavhale
– Sumeet Gavhale, Commented Apr 9, 2015 at 6:51
I never really use position:absolute and position:fixed, and it should be used very rarely, where the layout of the page is not "absolute" or "fixed". These are usually used on UI elements but never to a page layout. (It doesn't mean it's not possible) It seems that based on your programming style, you're very new at this. I would suggest to study the Bootstrap framework, understand how it's done, and apply it to the problem above. What you're doing is just a standard page layout, Bootstrap might help. — guest
– guest, Commented Apr 9, 2015 at 7:13
"I think the problem is, that the other areas are position:fixed and so the overall area all does not recognize the size of the other areas " Thats right. A parentContainer does not know the dimensions of its child when the child is position: fixed — Type-Style
– Type-Style, Commented Apr 9, 2015 at 7:16
Here is a pen to explore the simplified but yet overcomplicated code: codepen.io/anon/pen/wBLaQo — Type-Style
– Type-Style, Commented Apr 9, 2015 at 7:23

Steve Thomas · Accepted Answer · 2015-04-09 07:06:20Z

1

I think what you really need is responsive design -- a fancy term for making your web page work on any size of screen, from the biggest desktop monitor to an iPhone 5. That basically requires more CSS -- not difficult, but the issue is too complex to answer here. There are some good tutorials on the web, but start with Wikipedia: http://en.m.wikipedia.org/wiki/Responsive_web_design

answered Apr 9, 2015 at 7:06

Steve Thomas

3282 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

S.B. · Accepted Answer · 2015-04-09 07:51:48Z

Try my trial

<html>
<head>
<style>
body
{
    padding:0;
    margin:0;
}
.madegamesDiv
{
    display:block;
    max-height:34px;
    background-color:#778013;
    border-bottom:1px solid #39950E;
}
.allDiv
{
    display:block;
    clear:both;
    margin:0;
    padding:0;
    height:97%;
    background-color:#39950E;
    overflow:scroll;
}

.leftDiv
{
    float:left;
    width:19%;
    height:99%;
    overflow:hidden;
    padding:0;
    background-color:#FFFF00;
}
.leftDiv p
{
    padding:5px;
    margin:0;
    font-size:12pt;
}
.rightDiv
{
    display:block;
    float:left;
    width:78%;
    margin-left:0.5%;
    height:99.5%;
    overflow:hidden;
    padding:0;
    background-color:transparent;
}
.topDiv
{
    display:block;
    clear:both;
    height:20%;
    max-height:20%;
    overflow:hidden;
    background-color:#FF00FF;
}
.mainDiv
{
    display:block;
    clear:both;
    width:90%;
    margin:0 auto;
    margin-top:-3%;
    background-color:#FFFFFF;
    max-height:95%;
    overflow:auto;
    border: 1px solid #225909;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding:10px;
    background-color:#FF0000;
}
</style>
</head>
<body>
<div id="madegamesDiv" class="madegamesDiv">A</div>
<div id="all" class="allDiv">
    <div id="left" class="leftDiv">
        <p>Menu Area</p>
    </div>
    <div class="rightDiv">
        <div id="top" class="topDiv">
            <p>Top Area with logo and other stuff</p>
        </div>
        <div id="main" class="mainDiv">
            <h1>Main Area</h1>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>    
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
            <p>Here is a lot of text and content</p>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
</body>
</html>

Collectives™ on Stack Overflow

HTML CSS Div Overflow & Position "fixed"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related