I am trying to create a footer on my page that stays anchored at the bottom of the page as the user scrolls up and down. I am most of the way there but there are a couple problems which I describe below.
I have a JSFiddle at: https://jsfiddle.net/ay2y73co/
Here is the code I am using for my footer:
<!-- This fake paragraph only exists to put some space above the footer
so that page content is not hidden by the footer. -->
<p style="height:3.5em;margin:0px;"> </p>
<!-- Here is the footer, proper. -->
<div style="position:fixed;bottom: 0px;left:0px;padding:0.5em; height:3.0em;background-color:rgb(200,200,200);margin: 0px;width:100%;font-size:75%;border: 2px inset red">
<p>I want the right border to show up -- it seems it is clipped by the scrollbar.</p>
</div>
The first problem is that the right border of my footer is obscured by the scroll bar, basically, it is sitting behind the scrollbar as you can see from the missing right border.
The second problem is not really a problem, per se, but I do not like the fact that I have to put in a "fake paragraph" above the footer simple to prevent page content from being scrolled behind the footer. It does not feel like a clean solution.
In your footer's CSS, replace the width:100% with right:0
jsFiddle example
Or keep it, and add box-sizing:border-box
jsFiddle example
In your original code, the box at 100% width alone was too wide based on the boder and padding of the element.
If you look at this fiddle:
https://jsfiddle.net/ay2y73co/6/
you'll see that I've added a wrapper around your content, separate from the footer. I added a CSS class 'footer' as well, and placed your CSS for that in the provided stylesheet.
html, body {
width: 100%; height: 100%;
}
body {
margin: 0;
padding: 0 0 5.25em;
overflow: hidden;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.content {
height: 100%;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
div.footer {
position:fixed;
bottom: 0px;
left:0px;
padding:0.5em;
height:6.0em;
background-color:rgb(200,200,200);
margin: 0px;
width:100%;
font-size:75%;
border: 1px inset red
}
What you can do to fix your issue is apply bottom padding to the body or other tag that is the parent of the content. The padding should be equal to the height of the footer so that the scrollbar will not exceed the full height of the body.
Add this to your footer:
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The border adds up to the total width of your div so if you set your footer's width to 100% and put a 1px border in it, the width will be 100% + 1px left border + 1px right border. box-sizing: border-box automatically calculates the sum of all the margins, paddings and borders of your block element and adjusts them to match the actual specified width.
Related
I want a div to go across the page width no matter the size of one's screen. The problem I'm having is that although the width is 100%, when I view the page it requires scrolling horizontally. I've looked up solutions and tried the suggestions regarding the body element, but I still have this issue. Here are my body and div elements:
body{
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
}
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
To be clear this is not homework, I'm doing this for a personal project.
Yes, it is 100% width, but the browser also adds 1em of padding to it, so it's now 100% + 1em. You didn't set the box-sizing property and it's content-box by default.
If you want your layout to behave more naturally, add this to your code:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Check it here: https://jsfiddle.net/avyxhfcp/
BTW: there is no "float: center;"
You can hide the horizontal overflow using overflow-x. You could also use overflow:hidden, but the code below specifically targets horizontal scroll bar.
body {
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
overflow-x:hidden; /* hide the horizontal overflow */
}
The solution cosmonot provided is incorrect and will only cause you problems when your div's content stretches off-screen and you can no longer troubleshoot when there are overflow problems because you won't be able to see a scrollbar horizontally.
The real problem is that your div is using width: 100% to occupy the entire horizontal space available, it is then adding on the padding you specified as extra, this results in the overall width being over 100% which breaks out the body element giving overflow and thus making it horizontally scroll able.
The solution is not to alter your body's overflow property, the solution is to apply box-sizing: border-box; to your control panel div. This will make the width you specify include the padding and margin's you specify.
Example
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
In future try not to play around with the body, it's usually what you put into it that needs to be troubleshooted.
OK This seems really basic, but I can't seem to find an answer, maybe my search terms have been too general?
I have defined a top-level div that has a border round it, I want this to be the maximum size of the viewport.
This is the code in its most basic form
<body>
<div id="main">
test
</div>
</body>
And the CSS:
#main {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
border: 1px green solid;
}
See this JSFiddle:
http://jsfiddle.net/GpBS5/11/
The Div should have a 1px green border which is visible, but it always seems to have the bottom and right just off the display needing a scrollbar.
Use box-sizing: border-box
JSfiddle
The width and height of the div is 100% + 2px (2 borders, a pixel each), which requires scrollbars. box-sizing: border-box fixes this because it tells the browser to included the padding and border in the width and height.
I almost always use:
* {
box-sizing: border-box;
}
There's a default margin on the body. Add this to reset it to 0:
html, body {
margin: 0;
}
PLUS: Add box-sizing: border-box;to your #main DIV.
http://jsfiddle.net/gqL1zqeo/1/
I am trying to create a widget sidebar and I am encountering problems with the displayed image. The sidebar has a padding of 20px from all sides and the image's width is set to auto. However, when I display the images, it goes over the padding of the container instead of making its size adjusted to the padding. Here is the code (CSS):
aside {
top: 0px;
height: 100%;
display: block;
position: fixed;
width: 30%;
background: #f9f9f9;
padding: 20px;
border-left: 1px solid #e3e3e3;
}
img {
border: 0;
width: auto;
max-width: 100%;
height: auto;
}
*, *::before, *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
HTML:
<aside>
<div class="widget">
<img src="/disk.png">
</div>
<aside>
The widget class has no style, as I haven't implemented it due to this problem. Here is the screenshot: http://imgur.com/Gw1E0lg (thats where the container ends). How can I fix this issue? How can I make the image's width to be 20px less automatically, so it aligns with the CSS rules of the parent?
I found the answer myself. When using fixed CSS position without the right attribute, at least in safari and chrome, the block would align against the parent container's width. So, if the block is:
<nav style="position:fixed;left:0px;width:80px;">
</nav>
<main style="margin-left:80px;padding:10px;position:relative">
<div class="content" style="width:80%">
</div>
<aside style="width:20%;position:fixed;top:0px">
<div class="widget">
<img src="/disk.png">
</div>
<aside>
</main>
The aside would look like a right sidebar that fits the main element. But since the fixed position's width is relative the window, not the parent, its right position would basically start from off the screen, and the "20%" would be 20% to the parent, ignoring the other width. I don't know why safari and chrome render it this way, but because of that and the unluckiness of image size being 10px smaller than the aside element, I couldn't figure out how this problem is even possible.
So, to get what I wanted, I change the asides position to absolute and added overflow-y:scroll to my content class as the right bar should never move. Yes, I could play with width of the right bar but in my project that's the least of my concerns right now
This is the css of my div. İ expect the background to fill the whole screen but it is bigger than my screen resolution, so a bottom scroll bar appears
.hero-unit {
padding:60px;
margin-top: 60px;
background: url("../img/bar2.jpg") no-repeat scroll 0;
height:233px;
width:100%;
left:0px;
background-size: cover;
position:absolute;
background-color:#eeeeee;
}
You can use box-sizing
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
This makes it so when you add padding, margin, or borders it will not effect the width. (this will not work IE7 and below)
You are adding padding to the already 100% width.
What you need to do (if you are using percentages) is change your padding to be a percentage and make it add up to 100 percent.
For example:
padding:5%;
width:90%;
I also found an alternative using overflow:hidden to remove the scroll bar. This will not remove your issue though as the padding will still overflow the window, just not visibly.
html, body
{
width:100%;
}
body
{
overflow:hidden;
}
See the jsfiddle here.
remove padding if it is necessary then decrease width.
Try to keep them in percentages like
padding:5%; /*desired value*/
width:80%; /*desired value*/
when they will be added, it should be less than or equal to 100%.
If you have margin then consider it also. (assume margin:5%;)
For Example:
<----------------100%---------------->
margin | padding| div |padding | margin
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->|
This is same for Horizontal (width) or Vertical (Height) adjustments.
Often horizontal overflow happens due to an element whose opacity is 0. You can't also see the element but it leads to horizontal overflow. Add the following code to css.
body {
overflow-x: hidden;
}
.hidden-thing {
position: absolute;
left: 100%;
width: 50px;
height: 50px;
opacity: 0;
}
This might be due to the margins and the padding of the body.
Add this block to your body to see if it helps:
body {
margin: 0;
padding: 0;
}
Additionally, you're defining padding to an already 100% element, making it larger than the body.
I want to realize some mobile layout with two divs or buttons that fill the whole page 50% to 50% (EDIT: underneath each other).
Now when I do it with this code
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
section {
height: 50%;
}
section>div {
height: 100%;
border: 1px solid black;
margin: 10px;
}
<section>
<div>text1</div>
</section>
<section>
<div>text2</div>
</section>
the page is way too high.. Hardly surprising as the 10px margin and the 1px border enlarge the div... Also a wrapper div with a padding of 10px won't solve the problem.
How could I realize this layout where the page is not scrolling (not overflowing) but 100% heigh, with two buttons filling out the complete page (each at 50% or 70% - 30% or so) while the button itself has a margin or padding to get a small space to the page border and a e.g. 1px solid border?
Thank you in advance
^x3ro
To make it even more simple, couldn't you just use CSS box-sizing - which would be supported in most mobile browsers...(I included vendor prefixes for the example).
See example here
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
section {
height: 50%;
width: 100%;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
section div {
height: 100%;
background-color: #333;
border: 1px solid orange;
color: white;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
The box sizing property ensures that the height and width of an element aren't affected by borders, padding, or margins.
I would read this article on design for mobile devices if that's what you're designing for (there are more links at the bottom of the page you should follow).
And for your layout, do you mean something like this? I would recommend using absolute positioning when making designs like this. It makes everything much easier and it doesn't need flow layout anyway.
This is the solution i've been looking for: http://jsfiddle.net/WWcfm/10/
Thanks to Codemonkey's code example, placing two boxes right beside each other, I figured out how to set them underneeth each other.
Thank you!
#EDIT: Attention!
You'll need to use normalize.css. Otherwise it would look way different on your site!