How can I have a div with height 100% filling the viewport AND a second div (positioned absolute) covering the entire page (a dropdown)?
More info: I have a div on my homepage containing a hero image. The div needs to fill the viewport. Below the hero div is more content. I have the following code:
html { height: 100%; }
body { height: 100%; }
.hero { height: 100%; }
I would prefer to use height:100% than height:100vh because on tablets and phones (in Chrome) the viewport height changes when scrolling and in iOS Safari the bottom of the hero div is hidden behind the apps controls (bookmarks etc) when using 100vh.
The above works fine for the hero image div. BUT I have a drop down menu/nav bar. The dropdown needs to have a height of the entire page, not just the viewport. The menu has an absolute position. If I set the height to 100% it only covers the viewport height, not the entire page. The same is true if I set top:0; and bottom:0;.
How can I do this? Thank you
First pic shows the hero div in blue with a height of the screen (minus the header). There is more content below the 'fold'.
Second pic show the drop down menu which should cover the entire height of the page. Hence the white drop down will have considerably more height than just the hero div.
The inner element's height 100% means it will occupy its container. If you want to occupy the entire page, you have to use top:0, left:0 and in JavaScript, use innerElement.style.height=document.body.style.height;
Previous snippet might not work
You should use clientHeight
innerElement.style.height=document.body.clientHeight
You can use 'vh' and 'vw' instead:
100vh - 100 virtual height %
100vw - 100 virtua width %
You can use this:
function openMenu(){
document.getElementById("ddl").style.display = "block";
}
function closeMenu(){
document.getElementById("ddl").style.display = "none";
}
body{
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 50px;
position: relative;
width: 300px; /*for test */
}
.menu{height: 50px;} /* first child of body */
.hero{
flex: 1;
background-color:#4de6d0;
min-height: calc(100vh - 50px); /*for test */
} /* second child of body */
.dropDown {
position: absolute;
min-height: calc(100% - 50px);
top: 0;
background-color:white;
display: none;
width: 80%;
}
.dropDown > div{
height: 60px;
text-align: center;
line-height: 60px;
}
<body>
<div class="menu" onclick="openMenu()">Menu</div>
<div class="hero"></div>
<div class="dropDown" id="ddl">
<div onclick="closeMenu()">Close</div>
<div>Work</div>
<div>About</div>
<div>Services</div>
<div>Ethics</div>
<div>Contact</div>
</div>
<body>
Finally I did not understand what you exactly want, But if you want the drop down is the height of screen you can change this property:
min-height: calc(100% - 50px);
to this: calc(100vh - 50px);
In .dropDown styles
From exhaustive research it doesn't seem possible to have one div with a height of 100% to fill the height of the screen and a second div with height 100% to cover the height of the enire page.
Related
I am trying to set a <div> to a certain percentage height in CSS, but it just remains the same size as the content inside it. When I remove the HTML 5 <!DOCTYTPE html> however, it works, the <div> taking up the whole page as desired. I want the page to validate, so what should I do?
I have this CSS on the <div>, which has an ID of page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
I am trying to set a div to a certain percentage height in CSS
Percentage of what?
To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.
So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.
If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.
(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)
Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):
div {
height:100vh;
}
See here for more info.
You need to set the height on the <html> and <body> elements as well; otherwise, they will only be large enough to fit the content. For example:
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
bobince's answer will let you know in which cases "height: XX%;" will or won't work.
If you want to create an element with a set ratio (height: % of it's own width), use the aspect-ratio property. Make sure height is not explicitly set on the element for it to work. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square {
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
}
Historically, the best way to do this was to set the height using padding-bottom. Example for square:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
The square container will just be made of padding, and the content will expand to fill the container. Long article from 2009 on this subject: http://alistapart.com/article/creating-intrinsic-ratios-for-video
In order to use percentage(%), you must define the % of its parent element. If you use body{height: 100%} it will not work because its parent have no percentage in height. In that case in order to work that body height you must add this in html{height:100%}
In other cases to get rid of that defining parent percentage you can use
body{height:100vh}
vh stands for viewport height
You can use 100vw / 100vh. CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>
Sometimes, you may want to conditionally set the height of a div, such as when the entire content is less than the height of the screen. Setting all parent elements to 100% will cut off content when it is longer than the screen size.
So, the way to get around this is to set the min-height:
Continue to let the parent elements automatically adjust their height
Then in your main div, subtract the pixel sizes of the header and footer div from 100vh (viewport units). In css, something like:
min-height: calc(100vh - 246px);
100vh is full length of the screen, minus the surrounding divs.
By setting min-height and not height, content longer than screen will continue to flow, instead of getting cut off.
With new CSS sizing properties you can get away with not setting exact height on parent. The new block-size and inline-size properties can be used like this:
<!DOCTYPE html>
<style>
#parent {
border: 1px dotted gray;
height: auto; /* auto values */
width: auto;
}
#wrapper {
background-color: violet;
writing-mode: vertical-lr;
block-size: 30%;
inline-size: 70%;
}
#child {
background-color: wheat;
writing-mode: horizontal-tb;
width: 30%; /* set to 100% if you don't want to expose wrapper */
height: 70%; /* none of the parent has exact height set */
}
</style>
<body>
<div id=parent>
<div id=wrapper>
<div id=child>Lorem ipsum dollar...</div>
Resize the browser window in full page mode. I think the values are relative to viewport height and width.
For more info refer: https://www.w3.org/TR/css-sizing-3/
Almost all browsers support it: https://caniuse.com/?search=inline-size
http://jsfiddle.net/yLhh3/
I have three columns in a deadly simple CSS layout. They look perfect until content is added to one of them thus forcing the page to scroll (scroll down on the fiddle).
All I want is for the red boxes to ALWAYS go to the bottom of the page (not the window / screen, the page). How can this be accomplished with CSS?
.column
{
background-color: red;
width: 400px;
/* Page height minus header */
min-height: calc(100% - 192px);
/* Align to bottom of the page */
position: absolute;
top: 192px;
}
/* Half the page width minus (1.5 columns + offset between columns) */
.left { left: calc(50% - 630px); }
.right { right: calc(50% - 630px); }
/* Half the page width minus 0.5 columns */
.center { left: calc(50% - 200px); }
There has always been issues and questions about this and there are many ways to go about it, but the easiest, since your using absolute positioning, it to wrap the "column" divs inside the "center" div.
<div class="column center">
<div class="column right"></div>
<div class="column left"></div>
</div>
This allows the left and right divs to strech to 100% of the parent, the center. Some minor changes to the css, as you can see in the fiddle, like height: 100% and top: 0 for the contained columns since the parent top is considered 0 for the children.
jsfiddle
I hope I understand what you are trying to achieve.
I've used overflow: scroll; so you would not lose the content (You can set it to only Y if you want or hidden).
I've also used height since with min-height the overflow didn't triggered
.column
{
background-color: red;
width: 400px;
/* Page height minus header */
height: calc(100% - 192px);
/* Align to bottom of the page */
position: absolute;
top: 192px;
overflow: scroll;
}
I am trying to set the width of the .full_height_div element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (.set_rectangle_height) is already a div with height relative to the page width. Obviously, as the page is resized the divs on the page will resize, so i cannot set a fixed width in px for the .full_height_div child.
So .rectangle and .set_rectangle_height make up the parent container which has a width as a percentage of the page and a height relative to this width. See here for an explanation for this method.
But the problem is that then I want to place a div inside the parent with height: 100% and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.
here is my failed attempt:
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
So, this is what the above incorrect markup looks like:
And this is what i want it to look like:
I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.
you have to use javascript for that. If I understood you, you want a perfect blue square. Use
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
here is a jsfiddle: http://jsfiddle.net/a8kxu/
Edit: instead of doing padding-bottom: 30% do height: 70% instead. Here is another fiddle: http://jsfiddle.net/a8kxu/1/
Edit #2: Sorry, but you cant use css to do this. Its not powerful enough
If i understand you correctly
you can do
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}
I have a middle container that takes up whatever vertical space is left on the screen. In it, I placed a Jquery scroller that is currently set to 200px:
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 100%;
}
However, if I set .scroll-pane height to 100%, it just removes the scrollbar and stretches the whole page.
See JsFiddle here
How can I stop this? Thanks!
Here is my solution to this problem (jsfiddle). It uses markup like this:
<div id="top">...</div>
<div id="wrapper">
<div id="middle">...</div>
</div>
<div id="bottom">...</div>
The top and bottom divs are position absolutely at the top and bottom, with a width of 100%. The wrapper div has height: 100%, box-sizing: border-box, and top and bottom padding equal to the height of the top and bottom divs, respectively. This causes it to fill the viewport but have padding underneath the top and bottom divs. The middle div has a height of 100% so it fills the content box of the wrapper (i.e., 100% minus the top and bottom paddings). It has position: relative, which leaves you free to use height: 100% on both interior boxes.
Lastly, middleleft is positioned absolutely and middleright has a left margin equal to its width, which causes it to fill the remaining horizontal space.
height: 100% never works like you want it to. The CSS specifications dictate that it must equal the height of the browser window, or the closest parent block-level element with an absolute height specified. That means that this code will should not work as expected:
<!DOCTYPE html>
<html>
<head>
<title>Want the body to fill the page? Too bad!</title>
<style type="text/css">
html, body {
height: 100%;
}
.page {
padding-top: 50px;
box-sizing: border-box;
height: 100%;
}
.header {
margin-top: -50px;
height: 50px;
}
.body {
height: 100%;
background: gray;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<h1>Too bad!</h1>
</div>
<div class="body">
<p>Hello cruel world...</p>
</div>
</div>
</body>
</html>
However, that works fine in Chrome. Why? I can only assume that Google decided to specifically go against web standards because in this case, the standards make no sense. Why would I want something to be the exact height of the browser window? The only time is a <div> wrapping the whole page; in this case a simple "height is relative to the parent block" rule works just fine without breaking expectations elsewhere.
There is a way around this, though. At least, that's what I wanted to say before I tried this in Firefox too. Another way to get height: 100% (with some restrictions) is with position: absolute. However, it would seem that Firefox isn't respecting position: relative on a display: table-cell element - probably those pesky standards again. Here's the code for this technique anyway, if you are interested:
#wrapper > div > #middleleft {
position: relative;
}
.scroll-pane {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
So what can you do? Well, unfortunately, I don't yet know the answer to that. A kludgy solution would be to have Javascript set the height to an absolute pixel value, and attach an event to window resizing in order to update that height. I'll get back to you if I find a better way.
I'm not sure exactly what your trying to do, but another method would be to set body height to 100%, then set scrollpane to "height: auto". Then for the "top" and "bottom" div's used fixed positioning, plus margin equal to top/bottom height.
body {
height: 100%;
}
.top {
position: fixed;
top: 0;
height: 100px;
}
.middle {
height: auto;
margin: 100px auto;
}
.bottom {
position: fixed;
bottom: 0;
height: 100px;
}
<div class="top">content</div>
<div class="middle">content</div>
<div class="bottom">content</div>
Try that...
How do you style a div in Bootstrap to span the entire width of the viewport (without fixed positioning) within the normal 12-grid system of "rows" and "spans"?
In the Bootstrap source, the navbar-fixed-top class achieves this effect using a fixed position and left and right attributes:
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
However, this navbar stays in the window regardless of scrolling. What styles are necessary to achieve the same entire width of the viewport without fixed positioning?
You can get that effect by stretching the body and html tags 100% in height and width and then defining a child div to that same width. We do that because width and height are relative, so if we define a div 100% in width/height it will only stretch so far as the body and html tag. Take a look at this example:
html, body {
width:100%;
height:100%;
}
body {
padding-top:60px;
}
.wrapper {
height: 100%;
width: 100%;
}
.huge {
width:100%;
height:100%;
background-color:#eee;
}
Demo, edit here.
Note: There is some extra height added to the body of the .huge div due to the padding-top added to the body to make way for the top navbar, if that padding is removed it will become a "true" 100% height and not 100% height + top 60px as it is now.
If you want to utilize Bootstrap 3 grid and build full-width layouts (stretching row to the entire viewport width) you should consider two things:
Bootstrap's .row class sets the margin property to: margin: 0 -15px;.
Grid content should be wrapped in a containing element to offset the aforesaid margin.
CSS
.container-full-width {
padding: 0 15px; /* Offset .row's margin */
width: 100%;
}
/* Optional. See comment below. */
.row {
padding-left: 70px;
padding-right: 70px;
}
HTML
<body>
<div class="container-full-width">
<div class="row">
...
</div>
</div>
...
</body>
Bear in mind that the .row elements will have no margin, but it can be fixed by overriding the padding property of the .row class and setting the expected margin.
Alternatively you could consider overriding .row class and offsetting a margin value, but this requires setting different values for different media/device types.
It is worth checking whether it works in Bootstrap 2 likewise.