I've a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.
Related
I know similar questions have been asked numerous times, but I've tried a number of answers and none seem to work for my situation. I've found a lot of solutions for sticky footers, but that's not exactly what I'm looking for, or maybe I haven't figured out how to use correctly for my situation:
I have fully fixed position navigation (header/sidebars/footer). The content flows on top of the header and footer.
My content wrapper layer is currently a 100% width/ 100% min-height
layer above the navigation layer, and using simple padding on top/bottom and margins on left/right, I'm able to show the navigation elements.
Inside the wrapper layer I have my content div, which has my page
background and a box-shadow. But I can't get the content div to
expand to the full height of the wrapper, because the wrapper height
is based on percentage. So everything works perfectly when I have
content that fills or overflows the window, but when I don't, the content div is too small.
Sticky footer doesn't work in this situation because the sticky footer just covers the content (the content itself is still 100% height). I basically want the content to be min-height 100% - minus the 50px header and 50px footer.
Is there any css solution to this without using a javascript hack or calc()?
I would be willing to have the header + footer not be fix positioned - but I want to keep the box-shadow on the content div (i.e. 50px from top and bottom of the page).
JSFiddle:
https://jsfiddle.net/tyhenry/n9rpbj3m/5/
HTML:
<div id="nav">
<div id="header">
header
</div>
<div id="left-side">
left sidebar
</div>
<div id="right-side">
right sidebar
</div>
<div id="footer">
footer
</div>
</div>
<div id="page-layer">
<div class="page">
content<br>
content<br>
content<br>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
html, body{
background-color: #eeffff;
text-align: center;
margin: 0;
padding: 0;
height: 100%;
}
#header {
position: fixed;
top:0;
left:0;
width: 100%;
height: 50px;
background-color: #ddd;
}
#left-side {
background-color: #bbb;
position: fixed;
left: 0;
top: 50px;
width: 50px;
height: 100%;
}
#right-side {
background-color: #bbb;
position: fixed;
right: 0;
top: 50px;
width: 50px;
height: 100%;
overflow: hidden;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #aaa;
}
#page-layer{
position:relative;
padding: 50px 0 50px 0;
margin: 0 50px 0 50px;
min-height: 100%;
}
.page {
background-color: #fff;
box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.8);
width:100%;
}
If you change the display property to flex it fills the whole (height between header and footer) and adjusts when you resize.
#page-layout {
display: flex;
}
give this you the desirable outcome ? can i use viewport units
add:
.page {
min-height: 100vh; /*min-height not height :)*/
}
Try this updated fiddle https://jsfiddle.net/n9rpbj3m/6/
#page-layer{
position:absolute;
top:50px;
left:50px;
right:50px;
bottom:50px;
}
.page {
position:relative;
background-color: #fff;
box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.8);
height:auto;
min-height: 100%;
width:100%;
}
I have a main div contains two divs (one for heading and other for content). the main div is placed at the bottom of the html page with absolute positioning. When I hide content div, it sill takes up space in the bottom of the page.
I need to show only the header div to do a jquery toggle..
<div class="tll">
<div class="tllH">
</div>
<div class="tllC">
</div>
</div>
<style>
.tll{
background: yellow;
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.tllH{
background: green;
height: 20px;
width: 100%;
}
.tllC{
background: magenta;
height: 80px;
width: 100%;
display: none;
}
</style>
For .tll, you set a height of 100px.
.tllH is only 20px and coincidentally .tllC is 80px.
This is because the height of main container is fixed,The solution is present in this fiddle.
Setting .tll{height: auto} fixed the issue!
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I have this container which can scroll the content. I would like the header in this container to always stay in the top.
http://jsfiddle.net/z9ze5/
Container:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
overflow: scroll;
position: relative;
}
Header:
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: absolute;
margin: 0;
background: #DDD;
z-index: 999;
}
If you are willing to alter your mark-up, here is one way of doing it:
<div class="lists">
<header class="box_header">
<h1>HEADER 2</h1>
<div class="setting" id="btn2"></div>
</header>
<section class="content">
<p>Lorem Ipsum ....</p>
</section>
</div>
Wrap your scroll area in a <section> (or other block level element).
For your CSS:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}
Please see fiddle: http://jsfiddle.net/audetwebdesign/nGGXx/
More Advanced Example
If you study the following example:
http://jsfiddle.net/audetwebdesign/fBNTP/
uou can see how your scrolling boxes could be applied in a semi-flexible layout.
I lined up two scrolling boxes side by side and made their width proportionate to the width of the page.
The height is trickier to adjust. I fixed the height of the parent container, see the following rule:
.contentWrapper {
border: 1px solid red;
margin-top: 1.00em;
padding: 30px 0;
overflow: auto;
height: 400px;
}
If you change the height from 400px to some other value, the scrolling boxes will adjust themselves.
Hopefully, these examples will give you and others some more insights into how to build these more advanced layout designs.
If you want a non-css fix, add this listener...
$('.lists').scroll(function() {
$('.box_header', this).css('top', $(this).scrollTop()+'px');
});
and then change .lists css to give relative positioning
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: relative;
margin: 0;
background: #DDD;
z-index: 999;
}
Any position absolute within a position relative is absolute to the relative container. In order to have a header that stays in position, you'd need to position it above, not within, the scrolling container.
look at adding position: fixed to your header div .box_header. You may have to add padding of the height of the box header div to section.content but as you have that set to 30px that should be fine. IE6 and lower has issues with fixed positioning but hopefully we can live with that now - less people are using that than are still listening to Moby.
I would like to have a html/css layout, which has a div#header and div#body as direct children of body tag. I want div#body to fill the remaining space and I do not want to use JavaScript. I know it is possible if you know the exact height of the div#header. But i do not want to fix that.
example with fixed div#header
<head>
<style>
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
width: 100%;
}
#header {
position: relative;
<!-- i want to remove height because i want the header to size itself
dependent on it's content -->
height: 100px;
background-color: red;
}
#body {
<!-- I want to make the body position relative and set top to 0
but that does not work as expected.-->
position: absolute;
top: 100px;
margin: 0;
bottom: 0;
background-color: green;
height: auto;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="body">body</div>
</body>
Please let me know if there is any alternative which uses divs and css.
Many thanks in advance!
You can set the min-height of the body div to 100% to stretch out the body div (I've changed the body bg color to make it more obvious).
However, I'm not 100% clear on your second requirement (<!-- I want to make the body position relative and set top to 0 but that does not work as expected.-->)
Fiddle here
Here is the updated answer: what i have done is to make the parent html and body to display as a table and other divs to have properties of table row and this css will make them capture the whole screen area.
Now i have given the header height of auto.
and
#body is inheriting the other space.
Try this: http://jsbin.com/ezozeb/5/edit
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display:table;
}
#header {
background-color: red;
display:table-row;
height:auto;
}
#body {
background-color: green;
display:table-row;
height:inherit;
}
First of all, delete the height and width of the body element.
You can use page wrappers to make that happen:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#PageContentWrapper
{
width: 659px;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}
The pagecontentwrapper sets the minimum height to 500px.
In html you can then assign these identifiers to the body and divs
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
If you want to make a div scrollable, you should define a height and/or width and add this to the css:
overflow-x:auto; <!--horizontal-->
overflow-y:auto; <!--vertical-->
For example, if you set the pagewrappers height to 1000 (not the min-heigt) and overflow-y: auto; then the scrollbars will appear when content get out of bounds.
If you want to make the header always on top, you should apply something like this:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#Header
{
background-color:#aaaaaa;
width: 844px;
height: 240px;
}
#PageContentWrapper
{
width: 659px;
height: 700px;
overflow-y: auto;
float: left;
background-color: #e1e1e1;
padding: 10px;
}
and in html
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id=Header>
Headertext
</div>
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>