I have following html, which needs to remain as it is:
<body>
<div id="wrapper">
<div id="content">some text</div>
</div>
</body>
Now I need to make the content div to fill the page in 100%. I tried following CSS with no luck:
body {
height: 100%;
}
#wrapper {
position: relative;
}
#content {
position: absolute;
background: red;
height: 100%;
}
See here: http://www.cssdesk.com/hHZyD
Check this fiddle
I've edited the CSS as
CSS
html,body {
height: 100%;
}
#wrapper {
position: relative;
height: 100%;
}
#content {
position: absolute;
background: red;
height: 100%;
}
First of all, for height in percentage to work, height for html and `body should be set to 100%
ie
html,body {
height: 100%;
}
Next for the percentage to work, the parent div should be given a height.So i've changed
the css to
#wrapper {
position: relative;
height: 100%;
}
UPDATE
As #ctwheels specified in his comment, if the OP needs both height and width to be 100%,
Check the fiddle
Here i have set width to 100% for both the divs.
Demo
css
body, html {
height: 100%;
margin:0;
}
#wrapper {
position: relative;
height: 100%;
}
#content {
position: absolute;
background: red;
width: 100%;
height: 100%;
}
Related
I need to create a page where I would have a 100% wrapper between header and footer elements. The wrapper is a general content view where I will be adding templates. Apart of having the wrapper 100% height I need to have a first section in the wrapper also with 100% height.
The main problem is that I cannot position the footer relatively after the wrapper. It stays somewhere in the middle. See fiddle for example.
HTML
<header ui-view="header"></header> <!--Fixed Height/Relative-->
<div id="wrapper" ui-view="wrapper"> <!--100% Height/Relative-->
<section></section> <!--100% Height/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
</div>
<footer ui-view="footer"></footer> <!--Fixed Height/Relative-->
CSS
body{
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
html{
height: 100%;
}
div{
position: relative;
height: 100%;
width: 100%;
}
section:first-child{
height: 100%;
}
section{
position: relative;
display: block;
height: 400px;
width: 100px;
border: 1px solid black;
}
header{
position: relative;
height: 100px; width: 100%; background: red;
}
footer{
position: relative;
height: 100px; width: 100%; background: red;
}
JSFiddle
I believe the div you have around your sections is what's causing you some trouble. Check out the snippet below. If you place only your first section and the header in that div, you can accomplish what you want by putting height 100% on that div.
Note that without that div, your :first-child pseudo selector won't work because that section is no longer the first child of it's parent (header is). So I added an ID to it simply so I can reference it in the CSS.
So now the div is 100% of the height, header is a fixed height, and section1 is at 100% filling the remainder of the div.
body{
margin: 0;
padding: 0;
height: 100%;
background:green;
}
html{
height: 100%;
}
div{
height: 100%;
width: 100%;
background: pink;
}
section {
display: block;
height: auto;
width: 100%;
border: 1px solid black;
}
section#section1 {
height: 100% !important;
}
header{
height: 50px; width: 100%; background: red;
}
footer{
height: 50px; width: 100%; background: blue;
}
<div>
<header></header>
<section id='section1'>section1</section>
</div>
<section>section2</section>
<section>section3</section>
<footer></footer>
The height:100% you have set on the body is what's causing your footer element to be in the middle of the page. Remember that '100%' is '100% of your window height', so be careful with that. Cheers.
I would like to "pin" a button to the bottom of a sidebar-div that has a height of 100%, as it should fill the whole left side of the page.
I tried to do it this way:
.sidebar {
height: 100%;
position: relative;
background-color: #CCCCCC;
}
.btn {
position: absolute;
bottom:0px;
top: auto;
}
<div class="sidebar">
<button class="btn">Button</button>
</div>
It might be because of the height in percent, as it works with a Pixel-height, but there must be some way of getting this done with percent, as the sidebar must span the entire page height.
To fix this, give your html and body a height of 100% as follows. Right now they don't have a defined height set (so they are 0px high), so your button is technically already at the bottom.
Live Example:
html, body {
height: 100%;
}
.sidebar {
height: 100%;
position: relative;
background-color: #CCCCCC;
}
.btn {
position: absolute;
bottom:0;
}
<div class="sidebar">
<button class="btn">Button</button>
</div>
The issue is your container doesn't have any actual height. You'll need to define the height on both your html and body tags too to use percent height there.
html,
body {
height: 100%;
margin: 0;
}
.sidebar {
height: 100%;
position: relative;
background-color: #CCCCCC;
}
.btn {
position: absolute;
bottom: 0px;
top: auto;
}
<div class="sidebar">
<button class="btn">Button</button>
</div>
I need to have the wrapper div element to be full height and so adjust its height depending on the whole height of the page so no scrollbars are displayed.
My html:
<header>
I am the header and my height is fixed to 40px.
</header>
<div id="wrapper">
I am the wrapper
</div>
My css:
html,body {
height: 100%;
background: blue;
margin: 0;
padding: 0;
}
header {
height: 40px; <-------- this value is fixed
background-color: green;
}
#wrapper {
height: 90%;
background-color: red;
}
I know the height: 90% on the wrapper is wrong but I don't know what to do.
Here is the jsFiddle: https://jsfiddle.net/3putthcv/1/
You can use CSS calc():
#wrapper {
height: calc(100% - 40px); /* 40px is the header value */
background-color: red;
}
JSFiddle
Or display:table/table-row:
html,
body {
height: 100%;
width: 100%;
background: blue;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
}
header {
display: table-row;
height: 40px;
background-color: green;
}
#wrapper {
display: table-row;
height: 100%;
background-color: red;
}
<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>
JSFiddle
What about setting the size based on the top, left, right and bottom like this (demo) (full disclosure, it won't work if the content is too large):
#wrapper {
background-color: red;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
I'm trying to vertical align a child div to the bottom of its parent div, and set it as a percentage of the parent's height.
However, the height: 20% property of the child seems to be getting ignored, and the div stretches to take up the entire 100%.
The end goal is to have a full-screen title page photo as an intro to an article, with a semi-opaque bar running along the bottom of the photo that will have the title of the article in it. I'm using percentages to make it a responsive design for any size screen.
JS Fiddle:
http://jsfiddle.net/A52fw/1/
HTML:
<body>
<div id="outerdiv">
<div id="innerdiv">
test
</div>
</div>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
#outerdiv {
height: 100%;
width: 100%;
display: table;
}
#innerdiv {
width: 100%;
height: 20%;
background-color: red;
display: table-cell;
vertical-align: bottom;
}
Use positioning (relative on the parent, absolute on the child) instead of the display property:
#outerdiv {
height: 100%;
width: 100%;
position:relative;
}
#innerdiv {
width: 100%;
height: 20%;
background-color: red;
position:absolute;
bottom:0;
}
jsFiddle example
You can do this without absolute positioning, since you know the height of the child.
#outerdiv {
height: 100%;
width: 100%;
display: table;
}
#innerdiv {
width: 100%;
height: 20%;
margin-top: 80%;
}
In case your height is in pixels you can use:
#innerdiv {
width: 100%;
height: 40px;
margin-top: calc(100% - 40px);
}
I would like to create a div which fits the full height and width of the browser viewport. I just thought about simple css like:
#wrapper { width: 100%;
height: 100%;
background-color: red;
}
but it does not work for the height. The #wrapper does not have any height. Why?
Thanks in advance.
#wrapper {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
http://fiddle.jshell.net/zDuWh/
or
html, body { height: 100% }
#wrapper {
width: 100%;
height: 100%;
background-color: red;
}
http://fiddle.jshell.net/VJv6h/
How about this:-
#wrapper {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
or
html { height: 100% }
body { height: 100% }