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.
Related
Setting the width of an <img> to 100vw causes a horizontal scrollbar to appear on the bottom of the viewport, and the only working solution I have found to get rid of the latter is to use overflow-y: overlay;. However, I have read that this solution isn't optimal. What's a better alternative?
body {
margin: 0;
overflow-y: overlay;
}
The horizontal scroll had come up because this is only an issue on windows. On Mac or Android the scrollbars are placed on top of the content and disappear once you're done scrolling so they don't affect the view width.
If max-width: 100% is the width of the viewport without scrollbars, then you didn't need 100vw in the first place.
You could just have use width: 100% because the element doesn't have any positioned ancestor, so its reference is the body.
A simple solution in your case is by giving max-width: 100%.
HTML would be like:
<div class="box">
.
.
.
</div>
Use this CSS:
html, body {
margin: 0;
padding: 0
}
.box {
width: 100vw;
max-width:100%; // This is very Important.
height: 100vh;
}
Scrollbars are included in the vw and vh so the scroll will be added to allow you to see beyond viewport. You can set max-width: 100% to remove scrollbar.
width: 100vw;
max-width :100%
add:
div{
width:100vw;
height:100vh;
background-color:blue;
}
*{
margin:0;
padding:0;
}
<div></div>
this will remove default margin and padding
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/
Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.
I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
Example also on JSFiddle
If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).
It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.
Based upon #BoltClock♦'s answer, I fixed it by zeroing the margin...
so
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
works where id "st-full-pg" is assigned to a panel div (which further contained panel-heading and panel-body)
A bit late, but maybe it helps someone.
Adding float: left; to #container removes the scrollbar, as W3C says:
•Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
This worked for me
adding float:left; is nice, but will interfere with central horizontal positioning using margin:auto;
if you know how big your margin is, you can account for that in your height percentage using calc:
height: calc(100% - 50px);
browser support is good, but only IE11+
https://caniuse.com/#feat=calc
/*removes default margin & padding*/
html, body{
padding: 0px !important;
margin: 0px !important;
}
/*sets body height to max; and allows scrollbar as page content grows*/
body{
min-height: 100vh;
}
I have found a solution: add padding: 1px 0; to body prevents vertical scrollbars to appear
For those who are coming here for an easier to understand answer that even includes code samples, this answer (copied from here) is for you.
No JavaScript or definite pixel values (such as 100px) are required, just, pure CSS and percentages.
If your div is just sitting there on its own, height: 50% will mean 50% the height of the body. Normally, the height of the body is zero without any visible content, so 50% of that is just, well, zero.
This is the solution (based on this) (uncomment the background lines to get a visualisation of the padding):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html
{
height: 100%;
/* background: green; */
}
body
{
/*
100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
This prevents an unnecessary vertical scrollbar from appearing.
*/
height: calc(100% - 1em);
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
The above was written so that there would still be the usual padding. You could set the dimensions of the red div to 100% and still see padding on each side/end. If you don't want this padding, use this (although it doesn't look nice, I recommend you stick with the first example):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html, body
{
height: 100%;
}
/* You can uncomment it but you wouldn't be able to see it anyway. */
/*
html
{
background: green;
}
*/
body
{
margin: 0;
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
I saw this problem fixed before where you put all the contents of body in a div called wrap. Wrap's style should be set to position: relative; min-height: 100%;. To position #container div 50px from the top and left put a div inside wrap with a padding set to 50px. Margins will not work with wrap and the div we just made, but they will work in #container and everything inside it.
here's my fix on jsfiddle.
you can add non-breaking space into the body tag.
<body> <othertags>...</body>
html, body {
height: 100%;
overflow: hidden;
}
If you want to remove the body scrolling add the following style:
body {
height: 100%;
overflow: hidden;
}
Inspired by #BoltClock, I tried this and it worked, even when zoom out and in.
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
I guess body was shifted down 20px.
It works for me:
html,
body {
height: 100%;
height: -webkit-fill-available; // Chrome
}
// Firefox
#-moz-document url-prefix() {
body {
box-sizing: border-box;
margin: 0;
padding: 1px;
}
}
Add overflow: hidden; to html and body.
html, body {
height: 100%;
overflow: hidden;
}
I found a quick solution: try set height to 99.99% instead of 100%
I have an html input.
The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).
However using width: 100%; causes the input to be 100% + 20px how can I get around this?
Example
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.
This is why we have box-sizing in CSS.
I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/
All I added was this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.
Use padding in percentages too and remove from the width:
padding: 5%;
width: 90%;
You can do it without using box-sizing and not clear solutions like width~=99%.
Demo on jsFiddle:
Keep input's padding and border
Add to input negative horizontal margin = border-width + horizontal padding
Add to input's wrapper horizontal padding equal to margin from previous step
HTML markup:
<div class="input_wrap">
<input type="text" />
</div>
CSS:
div {
padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
Use css calc()
Super simple and awesome.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
As seen here: Div width 100% minus fixed amount of pixels
By webvitaly (https://stackoverflow.com/users/713523/webvitaly)
Original source: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/
Just copied this over here, because I almost missed it in the other thread.
Assuming i'm in a container with 15px padding, this is what i always use for the inner part:
width:auto;
right:15px;
left:15px;
That will stretch the inner part to whatever width it should be less the 15px either side.
Here is the recommendation from codeontrack.com, which has good solution examples:
Instead of setting the width of the div to 100%, set it to auto, and be sure, that the <div> is set to display: block (default for <div>).
You can try some positioning tricks. You can put the input in a div with position: relative and a fixed height, then on the input have position: absolute; left: 0; right: 0;, and any padding you like.
Live example
Move the input box' padding to a wrapper element.
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
See example here: http://jsfiddle.net/L7wYD/1/
Maybe browsers have changed since this question was last answered, but this is the only thing that has ever worked reliably for me to accomplish this:
width: auto;
left: 0;
right: 0;
Then you can make the margins / padding anything you want and the element will not expand past its available width.
This is similar to #andology's answer from way back but if you make left/right both 0 then you can make margin and/or padding whatever you want. So this is always my default div.
Just understand the difference between width:auto; and width:100%;
Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding.
Width 100% expands the width and adds the padding.
What about wrapping it in a container. Container shoud have style like:
{
width:100%;
border: 10px solid transparent;
}
Try this:
width: 100%;
box-sizing: border-box;
For me, using margin:15px;padding:10px 0 15px 23px;width:100%, the result was this:
The solution for me was to use width:auto instead of width:100%. My new code was:
margin:15px;padding:10px 0 15px 23px;width:auto. Then the element aligned properly:
You can do this:
width: auto;
padding: 20px;