Page height to 100% of viewport?

后端未结

关注

 4  1474

I\'ll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am th

相关标签:

4条回答

被撕碎了的回忆

2020-12-08 10:56
On Chrome, just adding display: flex on the body is enough.

On Firefox, you must add height: 100vh to get the desired result. And a margin: 0 will get rid of the annoying scroll bars.
```
<body style="display:flex; height: 100vh; margin: 0;">
  <div style="background-color: red; flex:1;"></div>
  <div style="background-color: green; flex:2;"></div>
  <div style="background-color: blue; flex:1;"></div>
</body>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
情话喂你

2020-12-08 11:14
Here’s just a simplified code example of the HTML:
```
<div id="welcome">
    your content on screen 1
</div>
<div id="projects">
    your content on screen 2
</div>
```
and here’s the CSS using vh:
```
div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}
```
From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

It works for me.
0 讨论(0)
发布评论:

提交评论
- 加载中...
礼貌的吻别

2020-12-08 11:17
I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.

The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.

jQuery
```
function windowH() {
   var wH = $(window).height();

   $('.sideBar, .mainImg').css({height: wH});
}

windowH();
```
This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.

I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.

JSFIDDLE (Remove 'show' at the end of the url to see code)

The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.

If you want a pure CSS only approach then you can do something like this,
```
html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}
```
By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.

Refer to this JSFIDDLE to see how it works.

Helpful read about responsive web design
0 讨论(0)
发布评论:

提交评论
- 加载中...

我寻月下人不归

2020-12-08 11:17

Sample code for exact Covering the page height.

HTML

<div class="container">  
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    Main content
  </div>
</div>

CSS

html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
.container {
 max-width: 1020px;
 margin: auto;
 height: 100%;
 background: #ffffd;
 padding:16px;
 box-sizing:border-box
}
.header,.content{
 background:#fff;
 padding:16px
}
.content{
 margin-top:16px;
 min-height:calc(100% - 160px);
}

Example Link : https://codepen.io/rahdirs/pen/jeRVod

0 讨论(0)