Geek asks and answers

How to make responsive and scrollable main panel for SPA application?

I am working on a SPA application that will also have a responsive design.

The plan is to have a fixed height header (30px), then filled content and a fixed header (20px). Just like TableLayoutPanel (Absolute: 30, Percent: 100%, Absoulte: 20) in winforms.

The content area fills all available space due to the size of the viewport and does not cause overflow to display the browser scroll bar. Instead, the content area has an internal scroll bar. All content is loaded in this area, so if necessary it will show a scroll bar.

enter image description here

When I searched and chatted with SO friends, I came up with this solution:

<div class="shell">

<header class="shell-header">Header Info</header>

<div class="main-row">
    <div class="main-scroll">
        <section class="main"
            data-bind="router: { transition: 'entrance', cacheViews: true }">
        </section>
    </div>
</div>

<footer class="shell-footer">Footer Info</footer>

And these are the styles:

.shell {
    height: 100%;
    display: table;
    width: 100%;
}

.shell-header {
    width: 100%;
    display: table-row;
    height: 30px;
}

.shell-footer {
    width: 100%;
    display: table-row;
    height: 20px;
}

.main-row {
    display: table-row;
    height: 100%;
    width: 100%;
}

.main-scroll {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #F5F5F5;
    display: block;
    height: 100%;
    margin: auto;
    max-width: 1100px;
    position: relative;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.main {
    height: 100%;
    background-color: whitesmoke;
    max-width: 1100px;
    width: 100%;
    position: absolute;
    display: block;
}

Firefox Chrome, . IE 10 div class="main-scroll" , - 0px .

1: ?

2: IE10?

+3
2

HTML BODY : 100%? , . .

HTML ( HTML):

<header>
     Fixed header here
</header>
<section>
    <p>Text here</p>
</section>
<footer>Fixed footer</footer>

CSS:

html {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
body {
    width:100%;
    position:relative;
    height:100%;
    margin:0;
    padding:0;
}
header {
    height:30px;
    position:absolute;
    top:0;
    width:100%;
    text-align:center;
    color:white;
    background-color:black;
}
section {
    padding: 30px 20px; /* first number needs to be higher then height header/footer */ 
    box-sizing:border-box;
    height:100%;
    overflow-y:scroll;
}
footer {
    position:absolute;
    z-index:1;
    width:100%;
    height:30px;
    bottom:0;
    text-align:center;
    color:white;
    background-color:black;
}

, Internet Explorer, Mac. JS: http://jsfiddle.net/Ykt98/2/ , HTML5- "" (IE) Javascript.

<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
+1

Google, , , .

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}
section {
    overflow-y: scroll;
    flex-grow: 1;
}
header, footer {
    text-align: center;
    color: white;
    background-color: black;
}
<header>
     Fixed header here
</header>
<section>
    <p>Text here</p>
</section>
<footer>Fixed footer</footer>
Hide result

0

More articles:


All Articles