CODEWITHSUNDEEP
htmlcss
Coopy
Coopy

Reputation: 46

How to layout elements to take the available vertical space that the browser currently has?

I am a beginner with html so this might be an easy/stupid question ;-)

For a little fun project I want a html page that takes the full height of the window but no scrolling. (E.g I always want to see the footer without using static positioning).

If there is more content than can be displayed, the nested divs should scroll. As the site will have 2 columns, there shall be 2 possible scrollbars.

I created a tiny example to better explain the problem:

HTML:

<body>
    <div id="sitepage">
        <div id="header" class="box">testtitle</div>
        <div id="dynamiccontent">
            <div id="leftside" class="box">
                <div id="navheader">little navigation</div>
                <div id="scrolleftcolumn" class="scrollcontainer">
                    <div id="forumandthreadlist">
                        <div class="forumslist selectable hoverable innerbox">textasfasdfds</div>
                    </div>
                </div>
            </div>
            <div id="rightside">
                <div class="box" id="navcontent">navigation hereasdfa sdfasd fsad sad fasd fasd fasdf asdf sd</div>
                <div
                id="scrollrightcolumn" class="scrollcontainer">
                    <div id="content">
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                    </div>
                    <div id="editor" class="box">post reply + editor + preview</div>
            </div>
        </div>
    </div>
    </div>
</body>

css:

html, body, * {
    padding: 0;
    margin: 0;
}
html {
    width: 100%;
    height: 100%;
}
#header {
}
#dynamiccontent {
}
#leftside {
    position: absolute;
    left: 0;
    right: 75%;
}
#rightside {
    position: absolute;
    left: 25%;
    right: 0;
}
div.box, .innerbox {
    margin: 5px;
}
div.box {
    background-color: #1c3c41;
}
div.innerbox {
    background: #274850;
    color: #C9C9C9;
}

JsFiddlelink Basically: what to do to enable vertical scrolling on the "scrollcontainer" class? Is it even possible in a liquid layout?

Note: I know about "overflow:auto;". I just can't seem to limit the height of the nested divs in a liquid layout to enable the scrolling.

Upvotes: 2

Views: 64

Answers (2)

Raj
Raj

Reputation: 3061

You need to do a fill parent all the way to the child that needs to expand to do the available height.

  1. The #sitepage should occupy all the available height
  2. The #dynamiccontent should be placed {size of header}px away from the top vertically
  3. The left and right regions should take the full available height.

Style:

html, body, * {
    padding: 0;
    margin: 0;
}
html {
    width: 100%;
    height: 100%;
}
#sitepage {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
#header {
}
#dynamiccontent {
    top: 30px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
#leftside {
    position: absolute;
    left: 0;
    top:0;
    right: 75%;
    bottom: 0;
}
#rightside {
    position: absolute;
    left: 25%;
    right: 0;
    bottom: 0;
    overflow: auto;
    top:0;
}
div.box, .innerbox {
    margin: 5px;
}
div.box {
    background-color: #1c3c41;
}
div.innerbox {
    background: #274850;
    color: #C9C9C9;
}

Upvotes: 0

Leonard Feehan
Leonard Feehan

Reputation: 481

add overflow:scroll; to the scrollcontainer class or overflow:auto if you want scroll only when the content spills over.

set their heights as percentages and constrain its width to prevent horizontal scroll.

I would suggest: 

header{
    height:10%;
}
dynamiccontent{
    height:85%;
}
footer{
    height: 5%;
}

then set the heights of the left and right columns to 100% (100% of the dynamic content)

Upvotes: 1

Related Questions