I need to center a div vertically and horizontally, and have its size be a certain percentage of the whole page (say 80%).
I can do this with vh and vw units (link)
<style>
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
body > div
{
position: absolute;
background-color: red;
top: 10vh;
left: 10vw;
width: 80vw;
height: 80vh;
}
</style>
<div></div>
...or with old table design (link)
<style>
html, body
{
margin: 0;
height: 100%;
}
#center
{
background-color: red;
}
</style>
<table height="100%" width="100%">
<tr height="10%"></tr>
<tr>
<td width="10%"></td>
<td id="center"></td>
<td width="10%"></td>
</tr>
<tr height="10%"></tr>
</table>
But I would like to support a div version. Can anyone provide any help?
A common way of displaying a divider in the middle of a page is to display it as a table with a table cell:
<body>
<div id="wrapper">
<div id="inner">
</div>
</div>
</body>
html, body { margin:0; height:100%; }
body { display:table; width:100%; }
#wrapper { display:table-cell; vertical-align:middle; height:100%; width:100%; }
#inner { height:50%; width:50%; margin:0 auto; }
JSFiddle example.
In this example, #inner is 50% width and height of #wrapper which is 100% width and height of the page body.
As #wrapper is displayed as a table-cell within a body displayed as table, the content within will be affected by the vertical-align:middle property, causing the #inner divider to be in the vertical middle of the page.
Applying margin:0 auto; to the #inner divider then aligns it to the horizontal middle.
The beauty of this is that you don't need to worry about offsetting the #inner divider, and aren't limited to just using percentage widths. Fixed widths will still be aligned in the middle of the containing #wrapper.
This is supported on all modern browsers: http://caniuse.com/#feat=css-table
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I have a header div and a div underneath it. I need the div underneath the header div to adjust depending on the height of the browser window size.
In CSS, when I add height:100% it creates a scroll bar at the side of the page. When I adjust the percentage of the width, spacing at the bottom of the page constantly changes because it is done with percentages.
I would like the div below the header to always adjust with the window size in height with no spacing at the bottom.
How do I do this?
Here is the Fiddle
JS Fiddle
I am not sure why but in JSFiddle the bottom div is not extending height: 100%
here is the code:
HTML
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}
try to use something like this code
html:
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
css:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main,
.left {
border:1px solid #000;
}
.main {
width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
}
.left {
height: 100%;
width: 300px;
}
You have a few options to achieve the layout you would like.
There are plenty of answers that address your problem from this similar question:
Make a div fill the height of the remaining screen space
However, here is my solution:
Just change your CSS a bit
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
width:100%;
height:60px;
border: solid;
position: absolute;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
height: 100%;
width: 300px;
border:solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 60px;
}
The box-sizing will prevent the padding-top and the borders from pushing the dimensions outside the browser window. The body,html height: 100%; is needed to allow other items to be 100% height (why your fiddle wouldn't work).
CSS allows you to do some basic math, so the following would help you:
Given that your header has a fixed height of 60px:
.left {
height: calc(100% - 60px);
}
Edit: you also have some extra padding and borders that you might want to take into consideration while calculating. Although I'm not a big fan of hard-coding values like that.
Try this in your style sheet
CSS
.left {
height: 100vh;
width: 100%;
border:solid;
}
Refer link
https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
I've seen plenty of solutions if the child div has a fixed width, but not if it is fluid.
The parent div should have a fixed height (150px) and fluid width (80%).
The child div should have a fluid height (expands with content) and fluid width (always 100%).
I want to get the child div to vertically align within the parent div. All content within the child div should also be horizontally centered.
Here's what I have right now:
http://jsfiddle.net/6986r/
<div class="s1">
<div class="centereddiv">This green div should be vertically centered.</div>
</div>
-
body, html {
height: 100%;
margin: 0;
}
.s1 {
width:100%;
height: 150px;
display: block;
background-color: red;
float: left;
}
.centereddiv {
color: black;
text-align: center;
background-color: green;
}
If you do not mind older browser, you may use the display:flex property (aside the table property already proposed by #SW4)
Notice that display:table can be used as a fall back for older browser
DEMO
Basic update to your CSS:
.parent {
display:flex;
}
.childcentereddiv {
margin:auto;
}
Likely the most flexible implementation would be to leverage display:table, however you will also need to adapt your HTML slightly and add an additional parent:
Demo Fiddle
<div class="table">
<div class="cell">
<div class="childcentereddiv">This green div should be vertically centered.</div>
</div>
</div>
CSS
body, html {
height: 100%;
margin: 0;
width:100%;
padding:0;
}
.table {
height: 150px;
background-color: red;
display:table;
width:80%;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.childcentereddiv {
color: black;
text-align: center;
background-color: green;
}
I want to split up the view in four parts. A header at the top, using full page width and fixed height.
The remaining page is split up in two blocks of the same height, the upper of them contains two same-sized blocks next to each other.
What I tried is (without the header):
#wrap {
width: 100%;
height: 100%;
}
#block12 {
width: 100%;
max-height: 49%;
}
#block1,
#block2 {
width: 50%;
height: 100%;
float: left;
overflow-y: scroll;
}
#block3 {
width: 100%;
height: 49%;
overflow: auto;
/*background: blue;*/
}
.clear {
clear: both;
}
<div id="wrap">
<div id="block12">
<div id="block1"></div>
<div id="block2"></div>
<div class="clear"></div>
</div>
<div id="block3"></div>
</div>
Apparently, using a percentage value for the height won't work that way. Why is that so?
add this to you CSS:
html, body
{
height: 100%;
}
working Fiddle
when you say to wrap to be 100%, 100% of what? of its parent (body), so his parent has to have some height.
and the same goes for body, his parent his html. html parent his the viewport..
so, by setting them both to 100%, wrap can also have a percentage height.
also:
the elements have some default padding/margin, that causes them to span a little more then the height you applied to them. (causing a scroll bar)
you can use
*
{
padding: 0;
margin: 0;
}
to disable that.
Look at That Fiddle
When you set a percentage height on an element who's parent elements don't have heights set, the parent elements have a default
height: auto;
You are asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing with the height of child elements.
Besides using a JavaScript solution you could use this deadly easy table method:
#parent3 {
display: table;
width: 100%;
}
#parent3 .between {
display: table-row;
}
#parent3 .child {
display: table-cell;
}
Preview on http://jsbin.com/IkEqAfi/1
Example 1: Not working
Example 2: Fix height
Example 3: Table method
But: Bare in mind, that the table method only works properly in all modern Browsers and the Internet Explorer 8 and higher. As Fallback you could use JavaScript.
add this to your css:
html, body{height: 100%}
and change the max-height of #block12 to height
Explanation:
Basically #wrap was 100% height (relative measure) but when you use relative measures it looks for its parent element's measure, and it's normally undefined because it's also relative. The only element(s) being able to use a relative heights are body and or html themselves depending on the browser, the rest of the elements need a parent element with absolute height.
But be careful, it's tricky playing around with relative heights, you have to calculate properly your header's height so you can substract it from the other element's percentages.
Percentage in width works but percentage in height will not work unless you specify a specific height for any parent in the dependent loop...
See this :
percentage in height doesn’t work?
The div take the height of its parent, but since it has no content (expecpt for your divs) it will only be as height as its content.
You need to set the height of the body and html:
HTML:
<div class="block12">
<div class="block1">1</div>
<div class="block2">2</div>
</div>
<div class="block3">3</div>
CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block12 {
width: 100%;
height: 50%;
background: yellow;
overflow: auto;
}
.block1, .block2 {
width: 50%;
height: 100%;
display: inline-block;
margin-right: -4px;
background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
width: 100%;
height: 50%;
background: lightblue;
}
And a JSFiddle
Basically, the problem lies in block12. for the block1/2 to take up the total height of the block12, it must have a defined height. This stack overflow post explains that in really good detail.
So setting a defined height for block12 will allow you to set a proper height. I have created an example on JSfiddle that will show you the the blocks can be floated next to one another if the block12 div is set to a standard height through out the page.
Here is an example including a header and block3 div with some content in for examples.
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
}
#block12{
position:absolute;
top:20%;
width:100%;
left:0;
height:40%;
}
#block1,#block2{
float:left;
overflow-y: scroll;
text-align:center;
color:red;
width:50%;
height:100%;
}
#clear{clear:both;}
#block3{
position:absolute;
bottom:0;
color:blue;
height:40%;
}
I want to create three, stacked divs. The top and the bottom ones will be of fixed height, whereas the one in the middle will have a dynamic height that expands to fill the remaining space:
I've tried numerous things, such as setting the height to auto. I do have a solution, but it involves JavaScript (i.e., calculating the remaining height) but I was wondering if there was a pure CSS solution.
There's a CSS solution, but it won't work in older browsers. You need to use the calc "function" that is new to CSS, combined with height: 100%. If you've never used height: 100% before, you know that every parent element of the one you want to be 100% tall must also be set to height:100%. calc can take a percentage value and subtract pixels from it, so you just need to set it to be 100% minus however tall the top and bottom divs are.
Supported by: IE9+, Firefox 4+, Chrome 19+, Safari 6+
http://caniuse.com/calc
HTML
<div id='top'></div>
<div id='mid'></div>
<div id='bot'></div>
CSS
html, body
{
height: 100%;
}
#top, #bot
{
height: 50px;
background: red;
}
#mid
{
height: calc(100% - 100px);
}
FIDDLE: http://jsfiddle.net/jakelauer/9cYUB/
One solution is to do it with position absolute.
The downside of this approach is that if the total height of surrounding is smaller then the sum of the fixed heights the container will not be visible anymore.
Another thing to be noted is that this is probably a bad solution if you want to target mobile devices. It always depends on the exact situation if this solution is suitable.
If i remember right you will only have problems with IE 6 (on desktop) which does not support the top bottom combination for the position absolute.
HTML
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
CSS
.header, .container, .footer{
position: absolute;
outline: 1px solid black;
}
.header {
left: 0px;
top: 0px;
right : 0px;
height: 50px;
}
.container {
left: 0px;
top: 50px;
right : 0px;
bottom: 50px;
}
.footer {
left: 0px;
bottom: 0px;
right : 0px;
height: 50px;
}
JSFiddle
You can do it with a HTML table if you need older browser support, or if you need to support IE8+ or higher you could use the CSS table layout.
Here's a jsFiddle using CSS table layout.
HTML
<div>
<div>
<div>Fixed Height</div>
</div>
<div>
<div>
<div>Variable Height</div>
</div>
</div>
<div>
<div>Fixed Height</div>
</div>
</div>
CSS
html, body {
height:100%;
width: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 20pt;
font-family: Verdana;
}
body > div {
display:table;
width: 100%;
height:100%;
}
body > div > div {
display: table-row;
}
body > div > div > div {
display: table-cell;
vertical-align: middle;
}
body > div > div:nth-child(odd) {
background: grey;
color: #FFF;
height: 100px;
}
body > div > div:nth-child(even) {
height:100%;
width:100%;
}
body > div > div:nth-child(even) >div {
height:100%;
width:100%;
overflow:hidden;
}
If i understand you request you need to use wrap div: http://www.cssstickyfooter.com/using-sticky-footer-code.html
I have a body background and I have a div in that body.On window resize, I want to have the application as such. To maintain the width,if I give fixed width to the body,on window resize I am not getting the scroll bar and as a result full page is not displayed. If I dont give fixed width, the page alignment changes and it the elements inside the body gets collapsed on window resize. Here is my code.Thanks in advance.
body.background
{
background: url(../images/common/header/Background_color.png);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:top center;
height: 100%;
width: 100%;
border: 0;
background-size:contain;
position:fixed;
overflow:auto;
}
div.emptybody
{
height:100%;
width:97%;
background-color: rgb(255, 255, 255);
margin: 0px 25px 25px 25px;
height:470px;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}
<body class="background">
<div class="emptybody">
-------------other elements and contents---------------
</div>
</body>
To maintain the width,if I give fixed width to the body.
You're not using a fixed width in your code, using '%' is dynamic.
On re-sizing your window it will always calculate in '%' from every border of the screen.
You need the page to 'overflow', to exceed the borders of the screen.
There are two ways of doing that:
Give your div a fixed width in pixels
div.emptybody { height: auto; width: 900px;}
Give the 'children' divs within their parent (div.emptybody) a fixed width.
div.emptybody { height: 100%; width: 97%;}
div.emptybodyChild {height: auto; width: 900px; }
try this
body {
height: 100%;
bottom: 0px;
width: 100%;
background-color: black;
}
div {
position:absolute;
height: 10px;
width: 200px;
margin:10px;
background-color: red;
}
also you can specify div posicion by providing margin-top/left/, or just using top/left/ values
You were on the right track, but you applied the overflow wrong. The overflow needs to be for the div with your content, and it needs to be set to scroll, find it here:http://jsfiddle.net/msbodetti/EWwJA/
You also gave two heights for the div. It applied the 100% height before the other height of 470px.
You can also add divs or spans within the main div to get fixed widths and heights if you need it for your content.
HTML:
<body class="background">
<div class="emptybody">
<span class="fixedText">-------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents---------------</span>
</div>
</body>
CSS:
body.background
{
background: #000;
background-repeat:repeat-x;
background-attachment:fixed;
background-position:top center;
height: 100%;
width: 100%;
border: 0;
background-size:contain;
position:fixed;
}
div.emptybody
{
width:250px;
background-color: rgb(255, 255, 255);
margin: 0px 25px 25px 25px;
height:200px;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
overflow:scroll;
}