I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:
But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).
My HTML looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
And my CSS looks like this:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:
But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:
Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.
I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/
If anybody can help me out, I'll really appreciate it.
Thank you!
PS: I'm all for using calc() if it works!
SOLUTION
I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.
A bit confusing, but it works!
My CSS is as follows:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.
height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:
Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.
The key here is to have a height property set on the parent.
display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO
CSS to modify :
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
display:table;/* addition */
}
article {
background: #74eb8a;
margin: 0px 20px 0px 170px;
min-height: 100%;
width:100%;
height: 100%;
position: relative;
display:table-cell; /* addition */
}
Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!
try this :
nav {
background-color: #747feb;
width: 150px;
position : absolute;
top : 100px;
left : 0;
bottom : 0;
}
article {
background: #74eb8a;
position: absolute;
top : 100px;
left : 150px ; /* nav width*/
bottom : 0;
right : 0;
}
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
How can i position the div#sky always exact above the div#house, while the img#roof is always on the bottom of div#sky?
div#plot must be always on the bottom of the browser as well.
The House should awalys has an aspect ratio of 1:1.09 and positioned at the bottom of the browser.
Above that house, the roof should be placed.
HTML:
<div id="main">
<div id="sky">
<img id="roof" src="img/roof.png" alt="roof">
</div>
<div id="plot">
<div id="house">
</div>
</div>
</div>
CSS:
div#main {
border-bottom: 1px solid dimgray;
height: 90%;
margin: 5vh auto;
padding: 0;
position: fixed;
width: 100%;
}
div#sky {
background: white;
height: auto;
margin: 0 auto;
padding: 0;
width: 100%;
z-index: 1;
}
div#plot {
bottom: 0;
height: auto;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
div#house {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-left: 2.4vw solid black;
border-right: 2.4vw solid black;
height: 0;
margin: 0 auto;
padding-bottom: 25.844%;
position: relative;
width: 33.2%;
}
img#roof {
bottom: 0.2vw;
height: auto;
left: 30%;
margin: 0 auto;
padding: 0;
position: absolute;
width: 40%;
}
Example:
http://www.kunkel-dienstleistungen.com/dev/
position the div#sky always exact above the div#house
Natural flow dictates that that is already the case
while the img#roof is always on the bottom of div#sky
Take of bottom: 0.2vw; and replace it with top: 100%;. Then add position:relative; to div#sky. The top value is pretty self explanatory. It will place the top of your #roof element 100% of its offset parent's height from its offset parent's top edge. Adding relative positioning to #sky makes it the offset parent of #roof.
div#plot must be always on the bottom of the browser as well.
You've got that part down (hehe... no pun intended).
The House should awalys has an aspect ratio of 1:1.09 and positioned at the bottom of the browser.
This part may be an issue, but it's too hard to tell with the lack of a solid demo. You have a demo in place, but it has a few issues. It doesn't have anything in the #sky element, so I don't know if the "sky" will be an image element, background image, or simple color.
Possible solution is using flexbox styles to adapt the sky height dynamically. Just nearly like a 'holy grail' layout where the footer gets always pushed to the bottom of the page.
css excerpt (see the jsfiddle for a complete example)
body {
display: flex;
flex-direction: column;
height: 100%
}
#sky {
display: flex;
justify-content: center;
align-items: flex-end;
flex: 1 0 auto;
background-color: #0080ff;
}
#plot {
display: flex;
justify-content: center;
flex: 0 0 auto;
background-color: #808040;
}
In this example the body is the main container and I don't use images for the roof or the house - just css background color and a border triangle. But it demonstrates the concept.
I'm having trouble eliminating the vertical scrollbar when applying a 50px padding (black) to the .background style.
html, body {height:100%; margin: 0; padding:0;}
div.background
{
width: 500px;
height: 100%;
background-color: black;
padding: 50px;
}
div.transbox
{
width: 100%;
height: 100%;
background-color: #ffffff;
position: relative;
background-color: rgba(255,255,255,0.3);
}
div.transbox p
{
margin: 50px;
position: absolute;
bottom: 0;
color: white;
}
This is what it looks like
http://jsfiddle.net/sm6LLgp4/2/
If I remove the top and bottom padding (black), the scrollbars are gone, but I've also lost my padding:
http://jsfiddle.net/sm6LLgp4/3/
How can I maintain the 50px padding all around without the vertical scrollbar?
Insert box-sizing:border:box, than it works.
*{
box-sizing:border-box;
}
In my navigation I have a protruding red box. I want that red box to overlap all Divs bellow it. I set a margin for it so it would space it out among the other elements I put in the black box. The problem is that it's margin is also effecting the layout of separate elements' children bellow it. When I add a negative margin to the child elements of the section bellow it does overlap but I want the red box to be on-top. I use z-index and it doesn't seem to work.
Here's my example on Jsfiddle:
http://jsfiddle.net/1qsuvhnd/29/
HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}
To use z-index, you need to specify a position (like absolute, fixed, or relative).
And the last line written is wrong:
z-index = 99;
The correct way to write it is:
z-index: 99;
How about: http://jsfiddle.net/1qsuvhnd/30/
change the ribbon to position: absolute; and fix the z-index = typo :D
Now you don't need that margin hack!!
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index: 99; /* take that equal out and make it a colon */
position: absolute; /* position: absolute to the rescue!!!! */
}
You need to specify a position CSS rule for the nav div for the z-index to work correctly, like this:
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index:99;
position: relative;
}
Here is the new jsFiddle link:
http://jsfiddle.net/1qsuvhnd/54/
What I am trying to do is, placing the two div blocks, CV and Contact at the bottom of the page, and when hovered over it, they would cover the whole page like they do at this state. I tried to move them with margin-top property, but they didn't behave proper when i hovered on them. Also, I want no scroll bars that is whatever user's screen size is, the boxes always appear in corner of page. Is my solution is valid for this, or do i need some javascript to do these? Here is my jsfiddle:
http://jsfiddle.net/cR9NL/
what positions should I use in this situation: absolute or relative?
html code is still the same, below is my css for you and demo:
CSS
html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }
#container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
#container div {
height: 25%;
width: 15%;
text-align: center;
}
#container>div:hover {
height: 100%;
width: 100%;
text-align: center;
position: absolute;
z-index: 5;
}
#upper-left{
background: #77cc00;
float: left;
border: solid 3px #99ee22;
}
#upper-right{
background: #ffdd22;
float: right;
border: solid 3px #ffff44;
}
#lower-right {
position: absolute;
bottom:0;
right: 0;
background: #55bbff;
border: solid 3px #77ddff;
}
#lower-left{
position: absolute;
bottom: 0;
left: 0;
background: #ff5522;
border: solid 3px #ff7744;
}
#container>div>p {
font-family: Tahoma;
margin: 28% auto;
font-weight: 900;
color: white;
font-size: 30px;
}
DEMO
http://jsfiddle.net/bartekbielawa/cR9NL/2/
Make the lower-left and lower-right divs positioned absolute, with 0 for the bottom value and 0 for the left and right values, respectively.
Fiddle :) :
position:absolute;
bottom:0;
right:0;
http://jsfiddle.net/cR9NL/1/