CODEWITHSUNDEEP
htmlcss
TheDude
TheDude

Reputation: 3105

Use *page-level* scrollbars to scroll a DIV (whose height to set to visible area)

Here's an ugly image showing what I'm trying to achieve. Basically I need to use the page scrollbars to scroll a DIV (whose height to set to visible area).

screenshot

Is this even possible in pure html5/CSS, if so how?

Upvotes: 0

Views: 263

Answers (4)

rojo
rojo

Reputation: 24466

How about framing your div out with a stack of fixed position border elements? Something like this:

<!-- don't forget to declare a doctype -->
<body>
    <!-- leave these empty -->
    <div id="frameTop"></div>
    <div id="frameBottom"></div>
    <div id="frameLeft"></div>
    <div id="frameRight"></div>

    <!-- put stuff in these -->
    <div id="top">Content here</div>
    <div id="content">
        <h3>Page title</h3>
        <p>Text here.</p>
    </div>
    <div id="bottom">Tabs</div>
</body>

Set borderTop to have a bottom border style, borderBottom to have a top border style, then borderLeft and borderRight have a solid background color to hide the border lines at the corners.

fiddle

Edit: I found another method that might be preferable. The HTML is certainly cleaner. Instead of using empty divs for frameTop, frameBottom, etc, use css psuedo elements on body:before and body:after. Then your HTML looks more like this:

<body>

    <div id="top">Content here</div>

    <div class="tab">
        <input type="radio" id="tab1" name="tab" class="radioTab" checked="checked" />
        <div class="content">
            <h3>Tab title</h3>
            <p>Text here.</p>
        </div>
        <label for="tab1">Tab 1</label>
    </div>

    <div class="tab">
        <input type="radio" id="tab2" name="tab" class="radioTab" />
        <div class="content">
            <h3>Tab title 2</h3>
            <p>Different text here.</p>
        </div>
        <label for="tab2">Tab 2</label>
    </div>

</body>

See this fiddle for the CSS that makes it work. I was a little lazy with the margin definitions in that fiddle, but it works well enough for a proof of concept.

Upvotes: 1

Syntax Error
Syntax Error

Reputation: 4527

I made a more complete jsfiddle that illustrates how to fake the borders that you need for the design.

JSFIDDLE

Note the extra padding on the top and bottom of the content div, and the use of background colors and borders to it seem like the interior box is it's own area. The orange sides actually scroll with the rest of it, and the top and bottom orange parts are attached to the header and footer.

html, body{
background-color:orange;
margin:0;padding:0;
}

header{
position:fixed;
top:0;
width:100%;
background-color:orange;
}

footer{
position:fixed;
bottom:0;
width:100%;
background-color:orange;
}

header section, footer section{
background-color:#fff;
height:30px;
}

header .frame{
border-bottom:1px solid #222;
margin:0 30px 0 30px;
height:30px;
}

footer .frame{
border-top:1px solid #222;
margin:0 30px 0 30px;
height:30px;
}

.content{
background-color:#fff;
border-right:1px solid #222;
border-left:1px solid #222;
min-height:100%;
margin:0 30px 0 30px;
    padding:60px 24px;
}

Edit: Just noticed your footer is a little different, but you can adjust this to get that effect.

Upvotes: 1

JakeParis
JakeParis

Reputation: 11210

Another way to acheive this effect would be to give the tabs div at the bottom a fixed position. So that might look something like:

<div>Content Here. Lots perhaps.</div>

<ul class="nav-tabs>
    <li>Tab 1</li>
    <li>Tab 2</li>
</ul>

and the css would be

.nav-tabs {
    position: fixed;
    bottom:0;
    width:100%;
    Height: 2em;
}
.nav-tabs li {
    float: left;
}

Try this jsfiddle. The scrollbar that appears is for the page, not the div, which is what you are wanting. Basically, the scroll bar for the page will appear if you have enough content, just like you would expect for any page. It's just that the navigation tabs always appear at the bottom of the page, no matter where you scroll to.

Upvotes: 0

jacobcc
jacobcc

Reputation: 344

theres a few ways to achieve that effect, since you're asking for a scrolling div, thats what ill do:

JSFIDDLE

CSS:

div {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: scroll;
}
nav {
    width: 100%;
    height: 100px;
    background: #f00;
}

HTML:

<div>some content</div>
<nav>buttons</nav>

Upvotes: 0

Related Questions