I am trying to get a div that is the document's width and height.
Minus 10 pixels all around as in this picture:
http://screensnapr.com/v/a9JWIf.png
But every time I pad or add to the margin of the body or outer div, it adds to the document's total height and shows scrollbars.
How can I make a div auto fill all available size without extending the size of the document?
edit: any negative margins do not effect the divs total size
Here is a fiddle
http://jsfiddle.net/ZRz32/6/
As you can see, it extends the document height.
I need it to stay the document's size minus ten pixels all around
I think that it's the easiest way to do it:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
#main {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 10px;
background-color: green;
}
<div id="container">
<div id="main"></div>
</div>
I updated your Fiddle here.
Here is a jsfiddle example.
Essentially, you need to set your containing element to width:100% and give it 10px of padding on left and right (padding:0 10px). Then, you can set your inner elements to width:100% and they will only go to within 10px of the max document width.
You could try either giving the div a width and height of 95-99%, but that won't always guarantee a space of 10px. You could do the 10px of padding on either the body or the div and just assign overflow:hidden to the body if you're planning on having all your content in one place.
If you want it fixed over the page, you could use positioning: <div style="position:fixed; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: rgba(155, 155, 155, .6);">Some text</div>
Related
Basically I tried to build a sidebar which has some spaces on top and bottom but I couldn't get at the bottom. Here is a pic sidebar has top spaces but not bottom
and here is my css code
.sidebar {
position: fixed;
top: 14px;
left: 20px;
//bottom: 14px;
width: 7.375rem;
height: 100%;
// margin-bottom: 14px;
border-radius: 1.8125rem;
background-color: blue;
z-index: 100;
}
How can I achieve like the sidebar has space too at the bottom as top. I tried to gave a margin to bottom and also setting the bottom but I didn't get it.
Could simply add an extra container as a wrap container and use padding.
using calc means you are strict to specify the amount of top/bottom you wish to have.
heres a quick example:
HTML:
<div class="wrap">
<div class="sidebar"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 7.375rem;
left: 20px;
position: fixed;
height: 100vh;
z-index: 100;
padding: 20px 0;
}
.sidebar {
border-radius: 1.8125rem;
background-color: blue;
height: 100%;
}
This way, the container with class wrap sets the limits of the inner container sidebar and padding, in the wrap container, limits so the inner container to be 20px from the top and bottom. box-sizing: border-box is IMPOSTANT tho, either apply it to everything, like in my example, or just the wrap class. Without it, the child element with height: 100% would take the entire parents height + 40px for top and bottom padding. What this does is similar to what calc would do just automatic.
Having the height set to 100% is causing problems here.
You could try using calc, to set the height to 100%, minus the top and bottom space that you want, for example:
height: calc(100% - 28px);
I have a div with some text on my page, and I want it to be at the bottom. I did this using fixed positioning:
div#popup{
position: fixed;
bottom: 0;
But I also want it to be centered. I tried giving it a width of 40% and auto margins, but that doesn't work (it doesn't work with the combination of the above code) :
div#popup{
position: fixed;
bottom: 0;
width: 40%;
margin-left: auto;
margin- right: auto;
How can I achieve this?
Thanks.
If you know width of div you can use negative margin-left for horizontal position (which equals half of width).
div {
position: fixed;
bottom: 0;
left: 50%;
width: 40%;
height: 30px;
margin-left: -20%;
background: blue;
}
JSFiddle
If you don't know width, just use wrapper and inline-blocks:
HTML:
<section>
<div>la-la-la</div>
</section>
CSS:
section {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
div {
display: inline-block;
border: 1px solid red;
color: red;
}
JSFiddle
I encourage You to check two nice tutorials (quick read):
http://www.barelyfitz.com/screencast/html-training/css/positioning
http://learnlayout.com/position.html
I think You need to describe position like this:
div#popup{
position: fixed;
bottom: 0;
right: 50%;
}
First off, you should never use fixed positioning to get your footer to stick to the bottom. To get the footer to stick to the bottom of the screen, set all your divs to relative, then add an extra div the same height as the footer (set a height for your footer) between the content and the footer. Then put a margin of negative that height on your content div. Works perfectly.
To centre it, use width auto and margin left and right auto or just use text-align center
I am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/
I'd like to create a DIV as big as the browser window and then show the website using vertical scrolling. The effect I am looking for is similar to the one in THIS PAGE (note the big banner that is always as big as the browser window, and the content at the bottom):
With this HTML in mind:
<div class="banner">
This banner is always big like the browser window
</div>
<div class="content">
Content of the website
</div>
This is one way to do it:
.banner {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: red;
}
.content {
width: 100%;
position: relative;
background-color: green;
}
Problem is, if I use absolute position for this DIV the content of my website start from the top of the page and is hidden by the banner.
Is there any way to implement this without using javascript?
Thanks in advance
Solution : FIDDLE
CSS:
html,body {
height:100%;
margin:0;
padding:0;
}
.banner {
height:100%;
background-color: red;
}
.content {
background-color: green;
}
Explanation :
The point is to get a base that fits the total window size. You can get this base by setting <body> and <html> tags to 100% height (they expand the total width by default). They then expand to 100% height of the parent which is the window.
So you don't need absolute position anymore to size you elements like the winow.
You can use 100% height on the first level children (in your case .banner) to have them fit the total window height. You will not have to set 100% width on most elements as they automaticaly expand the whole width (block elements like divs that are not floated and in relative or static position).
Your page will keep the default positioning and your .content div will start just under the window size .banner
Try this:
<style>
.banner {
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px;
}
.content {
width: 100%;
margin: 10px 0px 0px 0px;
padding: 0px;
background-color: green;
height: 100%;
}
</style>
I have a really difficult CSS problem. I have the following layout (this is just a fast mockup in Paint):
I need to float the red box to the bottom of it's container. Normally I would use position: absolute; bottom: 0; but that results in the text overlapping with the div, which I don't want. I want the box to behave like in the second image (same situation, but with more text)
Is this even possible? I don't mind dumping support for very old browsers.
Don't abandon position: absolute. Simply add padding to the bottom of the container equal to the height of the footer div.
#outer{
position: relative;
padding-bottom: 55px;
}
#foot{
position: absolute;
height: 55px;
width: 100%;
bottom: 0;
left: 0;
}
Without padding: http://jsfiddle.net/cG5EH/2
With padding: http://jsfiddle.net/cG5EH/1
Try this. calc allows you to make calculations within your css. In the example I am forcing the height to be 100% but this can be any value it could even be height: calc(100% + 80px). Note the spaces around the maths operator.
see http://css-tricks.com/a-couple-of-use-cases-for-calc/ for more details
<html>
<header>
<style type="text/css">
.container{
height:100%;
padding-bottom: 80px;
box-sizing: border-box; //ensures the padding is part of the 100% height.
position:relative;
background-color: blue;
}
.base{
position:absolute;
top:calc(100% - 80px);/*80px arbitary height of the element*/
height:80px;
width:100%;
background-color: yellow;
}
</style>
</header>
<body>
<div class="container">
<div class="base">
sdfgsdfg
</div>
</div>
</body>