No matter how its content is like.
Is it possible to do this?
This question is related to
html
css
responsive
The answer is
Change the body element into a flex container and the div into a flex item:
body {_x000D_
display: flex;_x000D_
height: 100vh;_x000D_
margin: 0;_x000D_
}_x000D_
_x000D_
div {_x000D_
flex: 1;_x000D_
background: tan;_x000D_
}<div></div>The best way to do this with modern browsers would be to make use of Viewport-percentage Lengths, falling back to regular percentage lengths for browsers which do not support those units.
Viewport-percentage lengths are based upon the length of the viewport itself. The two units we will use here are vh (viewport height) and vw (viewport width). 100vh is equal to 100% of the height of the viewport, and 100vw is equal to 100% of the width of the viewport.
Assuming the following HTML:
<body>
<div></div>
</body>
You can use the following:
html, body, div {
/* Height and width fallback for older browsers. */
height: 100%;
width: 100%;
/* Set the height to match that of the viewport. */
height: 100vh;
/* Set the width to match that of the viewport. */
width: 100vw;
/* Remove any browser-default margins. */
margin: 0;
}
Here is a JSFiddle demo which shows the div element filling both the height and width of the result frame. If you resize the result frame, the div element resizes accordingly.
This is the most stable (and easy) way to do it, and it works in all modern browsers:
.fullscreen {_x000D_
position: fixed;_x000D_
top: 0;_x000D_
left: 0;_x000D_
bottom: 0;_x000D_
right: 0;_x000D_
overflow: auto;_x000D_
background: lime; /* Just to visualize the extent */_x000D_
_x000D_
}<div class="fullscreen">_x000D_
Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa._x000D_
</div>Tested to work in Firefox, Chrome, Opera, Vivaldi, IE7+ (based on emulation in IE11).
Here's the shortest solution, based on vh. Please note that vh is not supported in some older browsers.
CSS:
div {
width: 100%;
height: 100vh;
}
HTML:
<div>This div is fullscreen :)</div>
I don't have IE Josh, could you please test this for me. Thanks.
<html>
<head>
<title>Hellomoto</title>
<style text="text/javascript">
.hellomoto
{
background-color:#ccc;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
}
body
{
background-color:#ff00ff;
padding:0px;
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
.text
{
background-color:#cc00cc;
height:800px;
width:500px;
}
</style>
</head>
<body>
<div class="hellomoto">
<div class="text">hellomoto</div>
</div>
</body>
</html>
This is the trick I use. Good for responsive designs. Works perfectly when user tries to mess with browser resizing.
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">some content</div>
</body>
This is my solution to create a fullscreen div, using pure css. It displays a full screen div that is persistent on scrolling. And if the page content fits on the screen, the page won't show a scroll-bar.
Tested in IE9+, Firefox 13+, Chrome 21+
<!doctype html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="utf-8" />_x000D_
<title> Fullscreen Div </title>_x000D_
<style>_x000D_
.overlay {_x000D_
position: fixed;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
left: 0;_x000D_
top: 0;_x000D_
background: rgba(51,51,51,0.7);_x000D_
z-index: 10;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
<div class='overlay'>Selectable text</div>_x000D_
<p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>_x000D_
</body>_x000D_
</html>Unfortunately, the height property in CSS is not as reliable as it should be. Therefore, Javascript will have to be used to set the height style of the element in question to the height of the users viewport. And yes, this can be done without absolute positioning...
<!DOCTYPE html>
<html>
<head>
<title>Test by Josh</title>
<style type="text/css">
* { padding:0; margin:0; }
#test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
window.onload = function() {
var height = getViewportHeight();
alert("This is what it looks like before the Javascript. Click OK to set the height.");
if(height > 0)
document.getElementById("test").style.height = height + "px";
}
function getViewportHeight() {
var h = 0;
if(self.innerHeight)
h = window.innerHeight;
else if(document.documentElement && document.documentElement.clientHeight)
h = document.documentElement.clientHeight;
else if(document.body)
h = document.body.clientHeight;
return h;
}
</script>
</head>
<body>
<div id="test">
<h1>Test</h1>
</div>
</body>
</html>
This always works for me:
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">some content</div>
</body>
This is probably the simplest solution to this problem. Only need to set four CSS attributes (although one of them is only to make IE happy).
What I found the best elegant way is like the following, the most trick here is make the div's position: fixed.
.mask {_x000D_
background-color: rgba(0, 0, 0, 0.5);_x000D_
position: fixed;_x000D_
top: 0;_x000D_
left: 0;_x000D_
right: 0;_x000D_
bottom: 0;_x000D_
margin: 0;_x000D_
box-sizing: border-box;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
object-fit: contain;_x000D_
}<html>_x000D_
<head>_x000D_
<title>Test</title>_x000D_
</head>_x000D_
<body>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<h1>Whatever it takes</h1>_x000D_
<div class="mask"></div>_x000D_
</body>_x000D_
</html>
Source: Stackoverflow.com