Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}
Related
I need all divs to be 100% document height. It works till some of them has a top margin. In this case remaining divs loses its full height.
How can I stretch all div's height to full document height, regardless of margin of any of them?
* {
.margin: 0;
}
html {
background: red;
height: 100%;
}
body {
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
float: left;
background: lightblue;
width: 40%;
height: 100%;
}
#divmiddle {
float: left;
margin-top: 25px;
background: lightgreen;
width: 40%;
height: 100%;
}
#divright {
float: right;
background: green;
width: 20%;
height: 100%;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
Here is the fiddle
You don't necessarily need height: 100% for your divs to be full height. You can achieve this layout, making the divs fully dynamic, with CSS flexbox.
All you need is display: flex on the container.
You can get rid of all float rules and don't need to use calc().
html {
background: red;
height: 100%;
}
body {
display: flex; /* NEW */
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
background: lightblue;
width: 40%;
}
#divmiddle {
margin-top: 25px;
width: 40%;
background: lightgreen;
}
#divright {
width: 20%;
background: green;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
revised fiddle
An initial setting of a flex container is align-items: stretch. This means that child elements of the container (aka "flex items"), will consume the free space in the cross-axis, which in this case is vertical / height.
You can use CSS calc() function, like:
#divmiddle{
margin-top: 25px;
height: calc(100% - 25px);
}
Have a look at the snippet below (let me know if this works for you):
html{
background:red;
height:100%;
}
body{
max-width:1366px;
background:blue;
height:100%;
margin: 0;
}
#divleft{
float:left;
background:lightblue;
width:40%;
height:100%;
}
#divmiddle{
float:left;
margin-top:25px;
background:lightgreen;
width:40%;
height:calc(100% - 25px);
}
#divright{
float:right;
background:green;
width:20%;
height:100%;
}
<body>
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
</body>
Hope this helps!
Just remove margin property from middle div..
#divmiddle{
float:left;
background:lightgreen;
width:40%;
height:100%;
}
You can simply deduct the margin percentage from the height. Instead of height: 100%, use something like width: 98%; height: 98%; margin: 1%; or width: 23%; height: 23%; margin: 1%;, etc.
I have an easy and stupid problem. I'm trying to fit a div under another div with height:100% without producing overflow, just fitting in body's height.
Example not working: https://jsfiddle.net/L38cea2s/1/
HTML:
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
CSS:
html, body {
height:100%;
}
#top {
width:100%;
height:50px;
background-color:red;
}
#left {
width:70%;
height:100%;
background-color:green;
float:left;
display:block;
}
#right {
width:30%;
height:100%;
background-color:yellow;
float:right;
display:block;
position:absolute;
}
I don't know why on jsfiddle my divs are not ocuppying 100% of width's body. But as you can see on the example, there's overflow because there's another div above both divs. I don't want an overflow:hidden.
Thanks!
Edit:
I'm searching for something like this: (Any div is behind any div)
This jQuery might help
var body = $('body').height();
var top = $('#top').height();
var workoutheight = body - top;
$('#left').css('height',workoutheight);
$('#right').css('height',workoutheight);
https://jsfiddle.net/L38cea2s/7/
I did a CSS only solution
Get the updated markup from JSFiddle
CSS
body {
margin: 0;
}
.sidebar {
width: 20%;
float: left;
background: #B2B200;
height: 100vh;
}
.main-content {
width: 80%;
float: left;
height: 100%;
}
.top {
height: 20%;
width: 100%;
background: #26FF5C;
height: 20vh;
}
.left {
width: 70%;
float: left;
background: #4DFFFF;
height: 80vh;
}
.right {
width: 30%;
float: left;
background: #8500B2;
height: 80vh;
}
https://jsfiddle.net/aq8awrnz/
You can use calc in your CSS as well... Example:
#left {
height: 100vh;
width: 300px;
float:left;
}
#top {
height: 45px;
width: calc(100vw - 300px); // or calc(100% - 300px)
margin: 0 0 0 300px;
}
#right {
height: calc(100vh - 45px);
width: 30%;
float: right;
}
#middle {
height: calc(100vh - 45px);
margin: 0 30% 0 300px;
}
The best is to use layering while thinking how you'll stack everything on top of each other. I've updated your jsFiddle here.
https://jsfiddle.net/L38cea2s/8/
html, body {
height:100%;
margin: 0;
}
#top {
width:100%;
height:50px;
top: 0;
background-color:red;
position: absolute;
}
#left {
width:70%;
height:100%;
top: 0;
background-color:green;
position: absolute;
}
#right {
width:30%;
height:100%;
top: 0;
background-color:yellow;
position: absolute;
}
I'm trying to figure out how to create a layout with:
- a fixed height header and not fixed
- two sidebars (one in each side)
- a column between the sidebars
- a fixed height footer sticky at the bottom of the page and that moves accordingly to the content (here is the problem, maybe)
I've seen many similar questions, but none of them seen to work with 3 columns.
I'm not sure, but I think it's something related to floating the columns of the content.
Here's the HTML code:
<div id="wrapper">
<div id="header">Header is ok</div>
<div id="container">
<div id="column-left"></div>
<div id="content"></div>
<div id="column-right"></div>
</div>
<div id="footer"></div>
Here's the CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100%;
position:relative;
}
#header {
background: green;
height: 60px;
position: absolute;
width: 100%;
}
#container {
margin: 0 auto;
width: 80%;
padding-top: 60px; /* size of header */
padding-bottom: 100px; /* size of footer */
background: red;
height: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
#column-left {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#column-right {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#content {
float: left;
width: 60%;
min-height: 100%;
background: pink;
}
Here's an example of what's happening when I add some content:
http://jsfiddle.net/Lzp67xyu/
See this fiddle
Change positioning of #footer to relative and add clear:both to #footer.
That is, the CSS for #footer would be like
#footer {
clear: both;
position:relative;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
According to the docs
The clear property specifies on which sides of an element where
floating elements are not allowed to float.
Putting a margin-bottom on the container with your columns in it will keep the space below it where the footer would be.
.columnncontainer{
width:80%;
margin-bottom:50px;
background-color:yellow;
display:inline-block;
}
Here's a JSFiddle I came up with as example:
http://jsfiddle.net/y5xwop8h/1/
I have simple layout and I'm trying to expand div's height to given % so I can put later scalled background img using backgound-size.
In example I wanna have div1 expand to 69%.
Why it doesn't work and how to fix it?
Link: https://jsfiddle.net/mc6ecstr/
CSS:
body
{
color: white;
margin: 0px;
padding: 0px;
height: 1080px;
}
#container
{
width: 100%;
height: 100%;
}
#header
{
background-color: blue;
width: 100%;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-left: 1.5%;
height: 69%; /*doesnt work*/
}
#div2 {
background-color: green;
float: right;
width: 43.17%;
margin-right: 3.6%;
}
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
You need to give to the body and html and to his parent (#container) height: 100%;
CSS
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%; /* Add this */
}
#container
{
width: 100%;
height: 100%; /* Add this */
}
DEMO HERE
If you know the height of #header you can use calc(...) and absolute positioning to make the container fill the remaining space:
#container
{
width: 100%;
height: 100%;
position:absolute;
top:20px;
left:0px;
height:calc(100% - 20px);
}
In this example I've set the header to a fixed height of 20px, then offset container by the same amount.
Then set #div1's height accordingly to fill 69% of #container.
Fiddle: https://jsfiddle.net/GarryPas/mc6ecstr/2/
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="inner-wrap">
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOTTER
</div>
</div> </body>
AND CSS:
html { height:100%; max-height:100%; }
body {
margin:0;
padding:0;
height:100%;
max-height: 100%;
}
#wrap {
min-height:100%;
height: 100%;
position:relative;
}
* html #wrap { height:100% }
#inner-wrap {
padding-bottom:50px;
min-height: 100%;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
* html #inner-wrap {
height:100%;
}
#header
{
width: 100%;
background-color: #C0C0C0;
height: 16px;
color: White;
text-align: center;
position: relative;
top:0px;
}
#footer
{
width: 100%;
background-color: #C0C0C0;
height: 50px;
position:absolute;
bottom: 0;
color: White;
text-align: center;
}
#content
{
width: 1000px;
height: 100%;
background-color: #F5FDEC;
margin: 0 auto 0 auto;
}
The Problem:
How i can make this: HEADER top 16px,
CONTENT dynamic 100% height,
FOOTER at end of page
If i give 100% to inner-wrap DIV, them after footer is white space.
Thx
You have too many heights going on:
Remove the min-height and max-height values from your selectors.
Remove the position: absolute; from your #wrap div.
I made an example for you here.
For the footer positioned at the bottom in a fixed position that doesn't move when you scroll the webpage use this:
#footer{
position:fixed;
clear:both;
}