Making html and body stretch to 100% height and mo

2020-02-12 01:34发布

站内问答 / HTML/CSS
1544 6 6

I want to make my <html> and <body> tags be the entire height of the viewport if the page isn't tall enough to warrant scrolling, or the entire height of the web page if it does.

At the moment I'm using this CSS:

html, body {
    height: 100%;
}

Which works a treat if the web page isn't tall enough for the user to scroll, however on a long webpage it only goes to the height of the viewport on the users browser. I also tried:

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

but that just seems to have the same effect as having no height declaration at all.

标签： html css
举报
6条回答
家丑人穷心不美
2楼-- · 2020-02-12 01:55 
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) 举报
虎瘦雄心在
3楼-- · 2020-02-12 01:57

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) 举报
萌系小妹纸
4楼-- · 2020-02-12 02:05 
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) 举报
再贱就再见
5楼-- · 2020-02-12 02:14

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) 举报
beautiful°
6楼-- · 2020-02-12 02:15

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) 举报
爷的心禁止访问
7楼-- · 2020-02-12 02:16

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)