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% }
Related
I have three elements:
.main
> .img-container
>> img
.main has a definite height,
.img-container has a max height equal to the container,
img should take up the containing div's height.
The problem is that the image is not constrained to the container's height,
as shown in this fiddle.
Please note that the image has to be limited to the container's height, not only making it vertically middle.
Thanks for your help.
Here is the current scss:
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
max-height: 100%;
width: 80%; /* just to show the main container */
img {
height: 100%;
}
}
}
Use height in .main .img-container class
DEMO
.main .img-container {
background-color: #ddd;
/*max-height: 100%;*/
height: 100%;
width: 80%;
}
Try this. Worked for me.
I have changed the max-height of image-container and height of img.
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
max-height: inherit;
width: 80%; /* just to show the main container */
img {
height: inherit;
}
}
}
may be you want this
.main {
height: 200px;
background-color: #eee;
text-align:center;
.img-container {
background-color: #ddd;
height: 100%;
width: 80%; /* just to show the main container */
img {
height: 100%;
}
}
}
i have replaced max-height with height and added text-align to center in main container. if you don't need image at center then remove text-align:center
Here is the solution.It's working for me
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
height: 100%;
width: 80%;
img {
height: 100%;
}
}
}
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 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%;
}
I have a CSS table set out with divs displaying two cells in one row. Each cell has a large image. The table should be full window size.
I want to make the large images scale down to fit side by side in the dimensions of the users window, whatever resolution that maybe. At present the images are at their full dimensions and won't scale down even if I target them directly with height: 100% width: auto and max-height: 100% max-width: auto.
Thanks very much for anyone who can help or point out the obvious.
HTML:
<div class="parent">
<div class="left"><img src="http://wallpaperstate.org/wp-content/gallery/ca_home/rainbow-colors-wallpaper-wallpapers-28469135-2560-1600.jpg"/></div>
<div class="right"><img src="http://wallpaperstate.org/wp-content/gallery/ca_home/new-2013-high-quality-abstract-wallpaper.jpg"/></div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
}
.parent{
display: table;
height: 100%;
width: auto;
}
.parent > div{
display: table-cell;
height: 100%;
width: auto;
}
.parent > .right {
height: 100%;
width: auto;
}
img {
width: auto;
height: 100%;
max-height: 100%;
max-width: auto;
}
Here is a JSFiddle
P.s Apologies for the load time of the large example images.
Edit: it's only about height so inline-block or float will be efficient :
html, body, .parent {
height: 100%;
margin:0;
}
.parent {
white-space : nowrap;
}
.parent > div {
display:inline-block;
height: 100%;
vertical-align:top;
;
}
img {
height: 100%;
max-height: 100%;
}
See http://jsfiddle.net/53ySr/6/
note the simpliest is http://codepen.io/gc-nomade/pen/vGhbf (no div.right nor div.left)
this was first version shrinking within window's width for those who are curious :
using display:table, you need table-layout to control width, that helps .
see http://jsfiddle.net/53ySr/2/ jsfiddle.net/53ySr/3/
html, body {
width: 100%;
height: 100%;
}
.parent{
display: table;
height: 100%;
table-layout:fixed;
width: 100%;
}
.parent > div{
display: table-cell;
height: 100%;
width: 50%;
background:#233C40;
}
img {
width: 100%;
height:100%;/* you can remove this */
max-height: 100%;
}
Just do the following edit to your css, It will do the trick.
html, body {
width: 100%;
height: 100%;
}
.parent{
display: table;
height: 100%;
width: inherit;
}
.parent > div{
display: table-cell;
height: 100%;
width: 50%;
}
.parent > .right {
height: 100%;
width: 50%;
}
.parent > .left {
height: 100%;
width: 50%;
}
img {
width: 100%;
height: 100%;
}
the fiddle is here http://jsfiddle.net/bvbHF/
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/