I'm trying to build a component with sticky header and footer, while the content height is dynamic. I tried to use the FIDDLE example (at the bottom of this post), but the behavior is not the same. When I resize the screen, the window just run over the footer/header.
This is what I'm trying to achieve:
The FIDDLE code example:
http://jsfiddle.net/PGC7D/18/
html,body
{
height: 100%;
}
header,footer,div
{
width: 100%;
}
.container
{
height: 100%;
background: pink;
margin: -64px 0 -30px;
padding: 64px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content {
overflow:auto;
height:100%;
}
.block
{
width: 50%;
height: 50%;
display: inline-block;
border: 1px solid yellow;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 30px;
background: gray;
position: relative;
z-index:1;
}
Related
The grey element, a div with id of #banner is not meant to be sticking out, I gave all the elements inside the div containing the welcome to fusion box, red element, and banner a min-height which adds up to all the min-heights of the elements inside it (welcome to fusion cube, red element, banner).
Basically it's not meant to stick out and I just can't figure out why it is sticking out.
JsFiddle
Not really something productive to ask but I can't figure it out and it's stressful
#main-wrapper{
width: 80%;
height: calc(75.5% - 10px);
margin: 10px auto 0;
min-height: 250px;
}
#page-title {
height: 7%;
font-size: 1.8em;
text-align: center;
padding: 1px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 35px;
}
#content-wrapper {
background: red;
height: 83%;
min-height: 160px;
}
#page-messages {
width: 100%;
height: 20%;
overflow: auto;
}
#banner {
height: 10%;
display: inline-block;
background: grey;
min-height: 55px;
}
footer {
height: 8%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5%;
margin: 20px 0 0;
width: 100%;
display: block;
}
you defined #banner as an inline-block - is that intention? (= not spanning the whole width?). Your fiddle looks quite different from the screenshot you posted...
try making its position: absolute and bottom: 0px;, and give the parent element (#main-wrapper) position: relative, and also a margin-bottom as high as #banner, which prevents content to be hidden by #banner.
(edited, wrong name for parent element)
I've been battling with this problem for a while and I'd like to ask advice if any of you can help.
I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.
My CSS is as follows:
* {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
border: 5px solid red;
margin-bottom: -16px;
}
body {
background-color: lightblue;
height: 100%;
border: 5px solid blue;
margin: 0 0 -16px 0;
}
.wrapper {
display: block;
position: relative;
background-color: green;
width: 605px;
margin: auto;
height: 100%
}
.header {
display: inline-block;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
I've set borders to html and body just to see that I can stretch them properly, so please ignore those.
You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.
JSFiddle
HTML
<div class="wrapper">
<div class="content">
<div class="header"></div>
</div>
</div>
CSS
.header {
position:absolute;
top:0;
left:0;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
padding-top:120px;
}
Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;
I have 2 divs. I gave the first one a height of 70px and now I want the 2nd div to fill up the remaining space of the webpage. This should be relative to the first div. Below is my code: (The 2 divs are header and content)
* {
margin: 0px;
padding: 0px;
}
#header {
background-color: #1874CD;
width: 100%;
height: 70px;
}
#name {
color: #ffffff;
padding: 10px 10px 10px 10px;
font-size: 35px;
font-weight: bold;
font-family: Calibri;
}
#content {
background-color: #F5F5F5;
width: 100%;
height: 650px;
}
How about doing something like this
(JSfiddle example):
#header{
background-color: #1874CD;
width: 100%;
height: 70px;
z-index: 2;
position: relative;
}
#content{
position: absolute;
left: 0px;
top: 0px;
background-color: #F5F5F5;
width: 100%;
height: 100%;
padding-top: 70px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
I'm having a bit of trouble with a div, my website has one wrapper sized height: 100%; this wrapper contains various divs like a header, slider and a content div. The only problem is the content div gets pushed out of the wrapper div for some mysterious reason.
html {
overflow-y: scroll;
height: 100%;
position: relative;
}
a {
outline: none;
}
img {
width: 100%;
border: none;
-moz-border-radius: 20px;
border-radius: 20px;
}
body {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0px 0px 0px 0px;
}
.wrapper {
width: 87%;
height: 100%;
background-color: red;
margin: 0 auto;
}
.header {
width: 100%;
height: 150px;
background-color: green;
float: left;
overflow: hidden;
}
.logo {
width: 7%;
height: 114px;
margin: 18px 0% 18px 3%;
float: left;
background-image: url("..//img/logo.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slogan {
width: 30%;
height: 100px;
background: orange;
margin: 25px 13% 25px 13%;
float: left;
}
.nav {
width: 31%;
height: 150px;
background-color: purple;
float: left;
margin: 0% 3% 0% 0%;
}
.search {
width: 100%;
height: 50%;
background: blue;
float: left;
}
.menu {
width: 100%;
height: 50%;
float: left;
background: grey;
}
.slider-container {
width: 100%;
height: 100%;
background-color: white;
}
.main-content {
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
float: left;
position: relative;
width: 100%;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
You can see a live demo at http://k2stuc.nl/test/
I don't understand your question 100%. But I saw an issue, the navigation behind the slideshow is because your slides, .wrapper .slider-container #slideshow > div has set to position:absolute.
Try setting .slider-container height to a fixed height. Otherwise slides will be above the content.
you are floating things that should not be floated
i.e .header, .main-content,#slideshow - none of these need floats - body should not have height:100%;
give .slide-container a fixed height in pixels not a percentage.. doing the above will fix your problem
Setting height: 100% on the <body> sets its height to 100% of the viewport.
Now, the viewport is as high as the browser window's inner-height; and that changes when you resize the browser itself.
Any direct child of the <body>, set to height: 100% then inherits the viewport's height.
That's part of how a lot of the 'parallax' websites do their thing.
I think the problem comes from the fact the slider div has height:100%
I need help to fix the next layout, because:
It doesnt look right for IE
The footer doesnt stay at bottom when #columns content grows up
I need to make the #column container 100% min-height with small content
Thanks in advance!
This is my code:
<style>
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height: 100%;
}
#header {
min-width: 1000px;
width: 100%;
height: 40px;
background: red;
}
#columns {
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
position: absolute;
bottom: 0;
min-width: 1000px;
width: 100%;
height: 40px;
background: black;
}
<body>
<div id="header"></div>
<div id="columns"></div>
<div id="footer"></div>
</body>
Try this (edited) :
JSFiddle: http://jsfiddle.net/NeCc3/14/
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height:100%
}
#header {
width: 100%;
height: 40px;
background: red;
}
#columns{
min-height:100%;
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
width: 100%;
height: 40px;
background: black;
}