CODEWITHSUNDEEP
javascriptcss
Basit
Basit

Reputation: 17184

Scroll 2 DIV contents + main content with browser's main scrollbar

I can't figure out, on how to go around this problem for moving content within two pages + outside content.

I have following layout:

I want to scroll pages content from the main scrollbar without any page scroll bar (like gmail compose example)

The main problem is. book will show after header and if user is using smaller screen resolution, it will show scrollbar to scroll down to see book properly.

Then we have two pages, which content are different from each other and each page can be longer then the other one. so we want to scroll through all the data, before we continue scrolling back to footer again.

jsFiddle Example: http://jsfiddle.net/7vqzF/2/

It would be awesome to solve this from css only.

Layout Structure: (solution should have only one main browser scrollbar, to control the pages and outside book content from it.) layout structure

Upvotes: 5

Views: 2896

Answers (3)

user1693593
user1693593

Reputation:

You can use the following approach with pure CSS and no tables.

See online demo here.

Result:

Example

It means however that you need to change the document structure a little (I am using HTML5 elements but this can easily be changed into normal divs if required) - as you can see the structure is fairly simple:

<header>Header
    <nav>Menu</nav>
</header>

<main>
    <div class="page">
        <h3>Page 1</h3>
        scroll from main scrollbar
        ....
    </div>
    <div class="page">
        <h3>Page 2</h3>
            scroll from main scrollbar
            ....
    </div>
</main>

<footer>Footer</footer>

Now it's just a matter of styling this so that you can use main scroll-bar to scroll "both" pages. The essential class in this context is:

.page {
    float:left;
    margin:70px 10px 50px 10px;
    border:1px solid #000;
    width:45%;
}

The important part with the page class is that its top and bottom margin is set to match header and footer. This is what makes the two pages visible even if the header and footer are fixed.

The rest of the CSS is just for example:

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
header {
    position:fixed;
    top:0;
    width:100%;
    height:70px;
    font:32px sans-serif;
    color:#fff;
    background:#555;
}
nav {
    position:absolute;
    bottom:0;
    font:12px sans-serif;
}
footer {
    position:fixed;
    width:100%;
    bottom:0;
    height:50px;
    background:#555;
}

Upvotes: 0

Rama Rao M
Rama Rao M

Reputation: 3051

Put your header part which needs to be in fixed in separate div and apply these styles.

  <div class="fix">
    <h1> Header</h1>
    <menu><ul><li>home</li><li>contact us</li></ul></menu>
    </div>
.fix{
 position:fixed;
    top:0px;
    left:0px;
    background:#FFF;
    width:100%;
    border-bottom:1px solid black;
}

for space add another div to bottom of the header 

<div class="space"></div>
.space{
 width:100%;
 height:150px;   
}

Here is the jsfiddle.

Upvotes: 1

Martin H&#246;ller
Martin H&#246;ller

Reputation: 2859

If I got your question right you are looking for the CSS attribute fixed. Here is some HTML including CSS that might do exactly what your are after:

<html>
  <head>
    <style>
      body {
        margin-top: 150px;
      }

      .header {
        width: 100%;
        position: fixed;
        top: 0;
        background-color: white;
        border-bottom: 2px solid lightblue
      }

      .footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        background-color: white;
        border-top: 2px solid lightblue
      }

      .book table td {
        vertical-align: top;
      }

      .page1, .page2 {
        border: solid 1px red;
        width: 400px;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <h1>Header</h1>
      <ul>
        <li>home</li>
        <li>contact us</li>
      </ul>
    </div>

    <div class="book">

      <table>
        <tr>
          <td>
            <div class="page1">
              <h2>Page1</h2>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              ...
            </div>
          </td>
          <td>
            <div class="page2">
              <h2>Page2</h2>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              ...
            </div>
          </td>
        </tr>
      </table>
    </div>

    <div class="footer">
      My Footer
    </div>     

  </body>
</html>

Here is a screenshot from my browser showing the above HTML: enter image description here

The Browser-Scrollbar scrolls only the page1/page2 <div> elemtents but not the header and footer elements.

And finally here is the jsFiddle Link for the online-demo.

Upvotes: 6

Related Questions