SyntaxFix

[html] force css grid container to fill full screen of device

How do I force a css grid container take the full width and height of the device screen for a single page app? Modified example is from Mozilla: Firefox documentation

_x000D_
_x000D_ 
.wrapper {_x000D_
  display: grid;_x000D_
  border-style: solid;_x000D_
  border-color: red;_x000D_
  grid-template-columns: repeat(3, 1fr);_x000D_
  grid-template-rows: repeat(3, 1fr);_x000D_
  grid-gap: 10px;_x000D_
}_x000D_
.one {_x000D_
  border-style: solid;_x000D_
  border-color: blue;_x000D_
  grid-column: 1 / 3;_x000D_
  grid-row: 1;_x000D_
}_x000D_
.two {_x000D_
  border-style: solid;_x000D_
  border-color: yellow;_x000D_
  grid-column: 2 / 4;_x000D_
  grid-row: 1 / 3;_x000D_
}_x000D_
.three {_x000D_
  border-style: solid;_x000D_
  border-color: violet;_x000D_
  grid-row: 2 / 5;_x000D_
  grid-column: 1;_x000D_
}_x000D_
.four {_x000D_
  border-style: solid;_x000D_
  border-color: aqua;_x000D_
  grid-column: 3;_x000D_
  grid-row: 3;_x000D_
}_x000D_
.five {_x000D_
  border-style: solid;_x000D_
  border-color: green;_x000D_
  grid-column: 2;_x000D_
  grid-row: 4;_x000D_
}_x000D_
.six {_x000D_
  border-style: solid;_x000D_
  border-color: purple;_x000D_
  grid-column: 3;_x000D_
  grid-row: 4;_x000D_
}
_x000D_ 
<html>_x000D_
<div class="wrapper">_x000D_
  <div class="one">One</div>_x000D_
  <div class="two">Two</div>_x000D_
  <div class="three">Three</div>_x000D_
  <div class="four">Four</div>_x000D_
  <div class="five">Five</div>_x000D_
  <div class="six">Six</div>_x000D_
</div>_x000D_
</html>
_x000D_
_x000D_
_x000D_ I'm not sure what to do to get this code to work. Any ideas/suggestions would be appreciated.

This question is related to html css css-grid

The answer is

If you take advantage of width: 100vw; and height: 100vh;, the object with these styles applied will stretch to the full width and height of the device.

Also note, there are times padding and margins can get added to your view, by browsers and the like. I added a * global no padding and margins so you can see the difference. Keep this in mind.

_x000D_
_x000D_ 
*{_x000D_
  box-sizing: border-box;_x000D_
  padding: 0;_x000D_
  margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
  display: grid;_x000D_
  border-style: solid;_x000D_
  border-color: red;_x000D_
  grid-template-columns: repeat(3, 1fr);_x000D_
  grid-template-rows: repeat(3, 1fr);_x000D_
  grid-gap: 10px;_x000D_
  width: 100vw;_x000D_
  height: 100vh;_x000D_
}_x000D_
.one {_x000D_
  border-style: solid;_x000D_
  border-color: blue;_x000D_
  grid-column: 1 / 3;_x000D_
  grid-row: 1;_x000D_
}_x000D_
.two {_x000D_
  border-style: solid;_x000D_
  border-color: yellow;_x000D_
  grid-column: 2 / 4;_x000D_
  grid-row: 1 / 3;_x000D_
}_x000D_
.three {_x000D_
  border-style: solid;_x000D_
  border-color: violet;_x000D_
  grid-row: 2 / 5;_x000D_
  grid-column: 1;_x000D_
}_x000D_
.four {_x000D_
  border-style: solid;_x000D_
  border-color: aqua;_x000D_
  grid-column: 3;_x000D_
  grid-row: 3;_x000D_
}_x000D_
.five {_x000D_
  border-style: solid;_x000D_
  border-color: green;_x000D_
  grid-column: 2;_x000D_
  grid-row: 4;_x000D_
}_x000D_
.six {_x000D_
  border-style: solid;_x000D_
  border-color: purple;_x000D_
  grid-column: 3;_x000D_
  grid-row: 4;_x000D_
}
_x000D_ 
<html>_x000D_
<div class="wrapper">_x000D_
  <div class="one">One</div>_x000D_
  <div class="two">Two</div>_x000D_
  <div class="three">Three</div>_x000D_
  <div class="four">Four</div>_x000D_
  <div class="five">Five</div>_x000D_
  <div class="six">Six</div>_x000D_
</div>_x000D_
</html>
_x000D_
_x000D_
_x000D_

Two important CSS properties to set for full height pages are these:

  1. Allow the body to grow as high as the content in it requires.

    html { height: 100%; }

  2. Force the body not to get any smaller than then window height.

    body { min-height: 100%; }

What you do with your gird is irrelevant as long as you use fractions or percentages you should be safe in all cases.

Have a look at this common dashboard layout.

You can add position: fixed; with top left right bottom 0 attribute, that solution work on older browsers too.

If you want to embed it, add position: absolute; to the wrapper, and position: relative to the div outside of the wrapper.

_x000D_
_x000D_ 
.wrapper {_x000D_
  position: fixed;_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  right: 0;_x000D_
  bottom: 0;_x000D_
_x000D_
  display: grid;_x000D_
  border-style: solid;_x000D_
  border-color: red;_x000D_
  grid-template-columns: repeat(3, 1fr);_x000D_
  grid-template-rows: repeat(3, 1fr);_x000D_
  grid-gap: 10px;_x000D_
}_x000D_
.one {_x000D_
  border-style: solid;_x000D_
  border-color: blue;_x000D_
  grid-column: 1 / 3;_x000D_
  grid-row: 1;_x000D_
}_x000D_
.two {_x000D_
  border-style: solid;_x000D_
  border-color: yellow;_x000D_
  grid-column: 2 / 4;_x000D_
  grid-row: 1 / 3;_x000D_
}_x000D_
.three {_x000D_
  border-style: solid;_x000D_
  border-color: violet;_x000D_
  grid-row: 2 / 5;_x000D_
  grid-column: 1;_x000D_
}_x000D_
.four {_x000D_
  border-style: solid;_x000D_
  border-color: aqua;_x000D_
  grid-column: 3;_x000D_
  grid-row: 3;_x000D_
}_x000D_
.five {_x000D_
  border-style: solid;_x000D_
  border-color: green;_x000D_
  grid-column: 2;_x000D_
  grid-row: 4;_x000D_
}_x000D_
.six {_x000D_
  border-style: solid;_x000D_
  border-color: purple;_x000D_
  grid-column: 3;_x000D_
  grid-row: 4;_x000D_
}
_x000D_ 
<html>_x000D_
<div class="wrapper">_x000D_
  <div class="one">One</div>_x000D_
  <div class="two">Two</div>_x000D_
  <div class="three">Three</div>_x000D_
  <div class="four">Four</div>_x000D_
  <div class="five">Five</div>_x000D_
  <div class="six">Six</div>_x000D_
</div>_x000D_
</html>
_x000D_
_x000D_
_x000D_

If you want the .wrapper to be fullscreen, just add the following in the wrapper class:

position: absolute; width: 100%; height: 100%;

You can also add top: 0 and left:0

Source: Stackoverflow.com

Questions with html tag:

• Embed ruby within URL : Middleman Blog • Please help me convert this script to a simple image slider • Generating a list of pages (not posts) without the index file • Why there is this "clear" class before footer? • Is it possible to change the content HTML5 alert messages? • Getting all files in directory with ajax • DevTools failed to load SourceMap: Could not load content for chrome-extension • How to set width of mat-table column in angular? • How to open a link in new tab using angular? • ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment • Angular 6: saving data to local storage • Vue.js get selected option on @change • Bootstrap 4 multiselect dropdown • How to add bootstrap in angular 6 project? • Angular 5 Button Submit On Enter Key Press • Angular 5, HTML, boolean on checkbox is checked • How to render string with html tags in Angular 4+? • bootstrap 4 file input doesn't show the file name • How can I execute a python script from an html button? • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width • Failed to load resource: the server responded with a status of 404 (Not Found) css • Change arrow colors in Bootstraps carousel • Bootstrap 4 Dropdown Menu not working? • CSS Grid Layout not working in IE11 even with prefixes • How to prevent page from reloading after form submit - JQuery • Centering in CSS Grid • Detecting real time window size changes in Angular 4 • Angular 4 img src is not found • (change) vs (ngModelChange) in angular • Bootstrap 4: Multilevel Dropdown Inside Navigation • Align the form to the center in Bootstrap 4 • How to style a clicked button in CSS • How do I change the font color in an html table? • Redirecting to a page after submitting form in HTML • Load json from local file with http.get() in angular 2 • display: flex not working on Internet Explorer • Scroll to element on click in Angular 4 • How to extract svg as file from web page • force css grid container to fill full screen of device • How does the "position: sticky;" property work? • HTML5 Video autoplay on iPhone • Disable button in angular with two conditions? • CSS hide scroll bar, but have element scrollable • CSS grid wrapping • How to load image (and other assets) in Angular an project? • Flask - Calling python function on button OnClick event • How can I make Bootstrap 4 columns all the same height? • Wrapping a react-router Link in an html button

Questions with css tag:

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width • Font Awesome 5 font-family issue • Failed to load resource: the server responded with a status of 404 (Not Found) css • CSS class for pointer cursor • How and where to use ::ng-deep? • Styling mat-select in Angular Material • What is the difference between CSS and SCSS? • iPhone X / 8 / 8 Plus CSS media queries • Change arrow colors in Bootstraps carousel • Bootstrap 4 Dropdown Menu not working? • Add class to an element in Angular 4 • CSS Grid Layout not working in IE11 even with prefixes • Search input with an icon Bootstrap 4 • Bootstrap 4 - Inline List? • Centering in CSS Grid • Bootstrap 4, how to make a col have a height of 100%? • Equal height rows in CSS Grid Layout • Bootstrap 4: Multilevel Dropdown Inside Navigation • Align the form to the center in Bootstrap 4 • Customize Bootstrap checkboxes • How to style a clicked button in CSS • How can I get the height of an element using css only • display: flex not working on Internet Explorer • force css grid container to fill full screen of device • How does the "position: sticky;" property work? • bootstrap 4 row height • Prevent content from expanding grid items • Bootstrap 4 File Input • CSS hide scroll bar, but have element scrollable • CSS grid wrapping • Bootstrap 4 Change Hamburger Toggler Color • How can I make Bootstrap 4 columns all the same height? • How to hide collapsible Bootstrap 4 navbar on click • Bootstrap 4 Center Vertical and Horizontal Alignment • Cannot read property 'style' of undefined -- Uncaught Type Error • How to window.scrollTo() with a smooth effect • Vertical Align Center in Bootstrap 4 • How to implement a Navbar Dropdown Hover in Bootstrap v4? • CSS change button style after click • What is correct media query for IPad Pro? • How do I specify row heights in CSS Grid layout?

Questions with css-grid tag:

• CSS Grid Layout not working in IE11 even with prefixes • Centering in CSS Grid • Equal height rows in CSS Grid Layout • force css grid container to fill full screen of device • Prevent content from expanding grid items • CSS grid wrapping • How do I specify row heights in CSS Grid layout?

Tags

Windows-7-x64 Debian Runge-kutta Html.radiobuttonlist Ostream Mod-auth-passthrough Ektron Idl-programming-language Wordle Url-protocol Safety-critical Data-binding Pyobjc T4 Jsr196 Multiple-forms Beyondcompare3 Sha512 Documentum6.5 Session-set-save-handler Libgmail Cfnetwork Dbdatareader Icepdf Android-animation Naming-containers Superpreview Easing Unique-id Threadpool C Mapreduce Jpos Cross-application Runlevel Contour Sage Dom-manipulation Legend Delphi-xe Cox-regression Customvalidator Runonce Iorderedenumerable Nsfilemanager Resource-governor Setter Visual-web-gui Form-layout Initializecomponent Process Func Datagram Custom-action-filter Cppcheck Sharepoint-deployment Tagging Embeddable Wsdl.exe Fftw Key-value-observing Contactscontract Wm-syscommand Size-t Worldpay System-design Webhttp Waitforsingleobject C++builder-2010 Quantify Footnotes Subdirectory Copy-initialization File-get-contents Reportingservices-2000 Ca1001 Openexr Ghc-api Sitemap Addeventlistener Nullreferenceexception Link-to Objective-j Focusrect Assemblyinfo Removing-whitespace Lnk2005 Builder-pattern Asplinkbutton Scriptlet Netapp Innerhtml Nhibernate-inheritance Zentest Windows-forms-designer Ivr Location Curly-brackets Xmlspy Joomla-sef-urls