Making html and body stretch to 100% height and more if the page scrolls

后端未结

关注

 6  639

I want to make my and tags be the entire height of the viewport if the page isn\'t tall enough to warrant scrolling, or t

相关标签:

6条回答

粉色の甜心

2020-12-18 22:23
You will need to specify the overflow attribute for the particular div. It will make sure your content is shown even when page is scrolled or content is more.
```
div {
    overflow:scroll;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
一向

2020-12-18 22:31
It sounds like your goal is for the body to
- always cover the screen (with minimal or no content)
- be able to stretch (if there is a ton of content)
if that's the case the following snippet should help
```
/* this looks like it should work

       html, body{
         min-height: 100%;
       }

    but this ↓ does the trick */

html, body{
  padding: 0;
  margin: 0;
}
html{
  height: 100%;
}
body{
  min-height: 100%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
遇见更好的自我

2020-12-18 22:31
```
html, body {
 height: 100%;
}
div {
 min-height: 100%;
}
```
This is the solution for Making html and body stretch to 100% height and more if the page scrolls
0 讨论(0)
发布评论:

提交评论
- 加载中...
广开言路

2020-12-18 22:36
```
html
{
  height: 100%;
}
body
{
  max-height: 100%;
}
```
using max-height in body element will wrap the content within the viewable size of page and remove the scrolling or extra whitespace.
0 讨论(0)
发布评论:

提交评论
- 加载中...
暖寄归人

2020-12-18 22:39
Have you tried:
```
min-height: 100vh;
```
That should set the height of the elements to the viewport and if they go beyond, it will have a scrollbar, here is an example:

http://codepen.io/r3plica/pen/jBaPYB
0 讨论(0)
发布评论:

提交评论
- 加载中...

情深已故

2020-12-18 22:48

A starting point:

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

(or add a container div with an ID, etc if you have issues with some browsers.)

EDIT: Adding full code example below:

<body>
    <aside>Sidebar</aside>
    <div id="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>

CSS:

* {
  font-size: 2em
}

aside {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: pink;
}

#main {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: red;
}

0 讨论(0)