I have a top header <div id="header"></div>, a middle part <div id="content"></div> and a bottom footer <div id="footer"></div>.
Header and footer has fixed heights 50px. I want to fix the positions of header and footer on top and bottom and I want to stretch the middle part (content) to fill the remaining space.
How can I do this?
You can use position: absolute on footer and header an then position the footer with bottom: 0px. I would do it this way:
#header {
height: 50px;
width: 100%;
position: fixed;
top: 0px;
z-index: 2;
}
#footer {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 2;
}
#content {
top: 50px;
width: 100%;
position: absolute;
z-index: 1;
}
I made it by defining the style as below;
#header, #content, #footer {
position: absolute;
}
#header{
top: 0;
width: 100%;
height: 50px;
left: 0;
right: 0;
}
#content {
top: 50px;
left: 0;
right: 0;
bottom: 50px;
}
#footer {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
}
You can see my fiddle here
Thanks #rocky3000 and #Mika for support :)
Search for sticky footers LINK here on stackoverflow or with google and the problem is gone.
Related
I would like to create a following shaped notice bar on the bottom of my webpage (sticky).
Here is my HTML
<div class="notice-container">
<div class="wave"></div>
<div>
<p>Content here</p>
</div>
</div>
And here is my CSS, I tried several things, but here is the latest:
.notice-container {
display: block;
height: auto;
background-color: #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.wave:after {
content: "";
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: auto;
}
Since the container has a position: fixed, how can I get the repeat-x work on the wave? I would like to display the background-image on top of the container div.
Your pseudo element needs display: block; and also a specified height attribute. Since the value auto would just tell it to extend to fit its contents (and it has none), then the height value would remain 0.
.wave:after {
content: "";
display: block; /* <- Add this */
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: 60px; /* Or whatever your wave.png requires */
}
Place your url and justice the sizes of image in background-size. Also do not forget to change needed height of pseudo element which is also needs to configure margin-top and top
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
footer {
width: 100%;
height: 70px;
border: 5px solid red;
border-top: 0;
margin-top: 20px;
position: relative;
}
footer:after {
width: 100%;
display: block;
content: '';
height: 20px;
position: absolute;
left: 0;
top:-20px;
background-image: url(https://i.stack.imgur.com/z4HMY.png);
background-size: 10% 20px;
}
<footer></footer>
I have a wrapper div which i want to expand to wrap the content that is dynamically generated. The content generated is a table, that increases based on the number of returned results.
css for wrapper div
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;
}
css for table inside the wrapper div
#Table {
position: absolute;
width: 940px;
height: 319px;
left: 409px;
top: 215px;
}
it doesn't show all the results, when i change overflow to visible it shows all but the results goes beyond the wrapper div, and i still want the footer div to always be at the bottom.
You have a couple of little problems here :)
First: You have set your height to a fixed value "1341px". Because you have set it to this value your div will never get higher than 1341px. You can use min-height if you want the div to only scale when the content gets bigger than 1341px.
Second: Your #Table is positioned Absolute. Wich means that the parent will always ignore the size of the #Table element when rendering.
i suggest you have a quick look at http://www.w3schools.com/css/css_positioning.asp for some more information on this toppic.
Try the following css:
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}
#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}
Happy coding :)
As someone say it in comments, height: auto; should works fine. But your code is a mess. I think you don't understand how css position works;
Let's create a container (.Container) and fill the parent (.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }). And simply add { position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; } for dymanic content block.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #F72F4E;
overflow: hidden;
}
.Container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #408080;
overflow: hidden;
}
.Content {
position: absolute;
width: 100%;
height: auto;
max-height: 100%;
overflow: auto;
bottom: 0; //or top: 0;
background: rgba(0,0,0,.2);
}
<main class="Container">
<div class="Content">Dynamic Content</div>
</main>
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me
I have a div with the id of #container, I have another div inside og it with the id of #content. The #content div has a larger size than the #container div, and I need it centeret horizontally and vertically inside of the #container div.
HTML
<div id="container">
<div id="content">
</div>
</div>
The CSS I have tried is.
#container {
height: 300px;
width: 300px;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#content {
height: 400px;
width: 400px;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
Though the sizes of the divs in the example are static values, the height will be changing all the time, so a dynamic solution is needed.
You can position them absolutely and then use CSS3 transforms to drag them back into place.
JSfiddle Demo
CSS
#container {
height: 300px;
width: 300px;
position: absolute;
top: 50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background-color: #663399;
}
#content {
height: 400px;
width: 400px;
position: absolute;
top: 50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background-color: rgba(255,0,0,0.5);
}
I have an absolute positioned div with an iFrame inside (doesnt work for silverlight objects either). For some reason it doesnt expand to fill its parent, which it should.
If you replace the iframe with a div with the same ID it works correctly.. Whats the problem?
<div id="rightpanel">
<iframe id="silverlightControlHost" src="http://google.com"></iframe>
</div>
#rightpanel {
background: green;
top: 32px;
left: 190px;
bottom: 0;
padding: 20px!important;
position: absolute;
padding-top: 0px;
overflow: auto;
min-width: 700px;
}
#silverlightControlHost {
background: red;
border: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
right: 0;
bottom: 0;
}
http://jsfiddle.net/ZfG3g/
sticking the following on the iframe seems to work (in the fiddle at least anyway):
#silverlightControlHost {
width:100%;
height:100%;
... rest of your css ...
}
http://jsfiddle.net/ZfG3g/1/
you may try this
you forget to mention iframe width and height
check the below code this is covering the full parent block
<div id="rightpanel">
<iframe id="silverlightControlHost" src="http://google.com" width="740" height="630"></iframe>
</div>
<style>
#rightpanel {
background: green;
top: 32px;
left: 190px;
bottom: 0;
padding: 20px!important;
position: absolute;
padding-top: 0px;
overflow: auto;
min-width: 700px;
}
#silverlightControlHost {
background: red;
border: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
right: 0;
bottom: 0;
}</style>