如何获得一个滚动条在一个固定的页眉和页脚的div？ [英] How to get a scrollbar in a div with fixed header and footer?

问题描述

我有一个网站和滚动条的一些问题。

我想要的最好解释这个图片。

但我无法获得这样的滚动条。

我试过了一些，这里是 jsfiddle

在这个小提琴我也有：

  div [role =main] 
 {
 overflow-y：scroll; 
 margin：60px 0; 
} 
  

但这个保证金不行，我怎么知道我需要什么保证金

解决方案

这可以通过使用padding和box-sizing = border-与body高度100％，它将填充到高度，所以框滚动将正好在页眉和页脚之间）

  html {
 overflow：hidden; 
 height：100％; 
} 
 
 body {
 padding：60px 0px; 
 height：100％; 
 box-sizing：border-box; 
} 
 
 div [role =main] {
 overflow-y：scroll; 
 height：100％; 
} 
  

请参阅 http://jsfiddle.net/wPucQ/

编辑：在代码中忘记HTML标记

I have an website and some problems with the scrollbar.

What I want I can best explain with this image.

But I can't get the scrollbar like this.

I have tried some, here is the jsfiddle

In this fiddle I also have:

div[role="main"]
{
    overflow-y: scroll;
    margin: 60px 0;
}

But this margin is not OK, how do I know what margin I need without knowing the header and footer height.

解决方案

This can be slowed by using padding and box-sizing = border-box on body ( with body height 100% it will count padding into height, so the box with scroll will be exactly between header and footer)

html {
 overflow: hidden;
 height: 100%;
}

body {
 padding: 60px 0px;
 height: 100%;
 box-sizing: border-box;
}

div[role="main"] {
 overflow-y: scroll;
 height: 100%;
}

see http://jsfiddle.net/wPucQ/

EDIT: Forget HTML tag in code

这篇关于如何获得一个滚动条在一个固定的页眉和页脚的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！