Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height

前端未结

关注

 3  1259

I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) ge

相关标签:

3条回答

旧时难觅i

2020-11-30 08:03

Indeed, to make it work do as follow:

<!DOCTYPE html>
<html>
<head>
  <title>Vertical Scrolling Demo</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: white;
      margin:0;
      padding:0;
    }
    .page {
      min-height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="nav" class="page">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <div id="page1" class="page">
    <h1><a name="about">about</a></h1>
    About page content goes here.
  </div>
  <div id="page2" class="page">
    <h1><a name="portfolio">portfolio</a></h1>
    Portfolio page content goes here.
  </div>
  <div id="page3" class="page">
    <h1><a name="contact">contact</a></h1>
    Contact page content goes here.
  </div>
</body>
</html>

0 讨论(0)

滥情空心

2020-11-30 08:05

Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.

So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.

See this example, to make it clearer:

html, body, .outer, .inner, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>

This wouldn't work, if I didn't give 100% height to—say html element:

body, .outer, .inner, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>

… or .inner

html, body, .outer, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>

0 讨论(0)

说谎

2020-11-30 08:14
I got stuck into a similar problema to size a canvas, so here is what i did and worked perfectly.

Besides doing the:
```
body{ width: 100%; heigh: 100%;}
```
Set the desired element like this:
```
.desired-element{ width: 100vw; heigh: 100vh}
```
In that way you are assured to have 100% of the view port in width and height. vw stands for viewwidth and vh stands for viewheight

I hope this helps someone
0 讨论(0)
发布评论:

提交评论
- 加载中...